Angular/Foundation - ng-view inside off-canvas-wrap

Question

I am having a basic problem, it seems. The code is pretty simple:

<body ng-app="myApp">

  <div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
      <!-- navigation -->
      <nav class="tab-bar">
        <section class="left-small">
          <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
        </section>
        <section class="middle tab-bar-section">
          <h1 class="title">My App</h1>
        </section>
      </nav>

      <!-- left-hand menu -->
      <aside class="left-off-canvas-menu">
        <ul class="off-canvas-list">
          <li><label>Foundation</label></li>
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
          <li><a href="#">Four</a></li>
          <li><a href="#">Five</a></li>
        </ul>
      </aside>

      <!-- primary content -->
      <div ng-view></div>

      <a class="exit-off-canvas"></a>
    </div>
  <div>

</body>

If I use ng-view with the content in a separate file that gets loaded in, it disappears on interaction. It is there initially, but it disappears after I click the menu icon (Screenshot 1). On refresh the content comes back but further interaction with the off-canvas menu makes it disappear again.

If I take out the ng-view element and replace it with static content everything works just fine (Screenshot 2).

Screenshot 1

Screenshot 2

What am I doing wrong here?

Angular 1.4.9
Foundation 5.5.3

I am assuming because when you click a menu icon, the route is changing, thus the loaded view for that route is changing too. — mariocatch, Feb 04 '16 at 02:38
I'll have to fiddle around and see if i can prevent navigation on any of those clicks. — el n00b, Feb 04 '16 at 02:41
There is this, that may help: http://stackoverflow.com/questions/12422611/angularjs-paging-with-location-path-but-no-ngview-reload/12429133#12429133 — mariocatch, Feb 04 '16 at 02:44

el n00b · Answer 1 · 2016-02-04T03:55:38.080

I changed one line to get this working:

This line:

<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>

Is now:

<span class="left-off-canvas-toggle menu-icon"><span></span></span>

I contemplated using href="javascript:" but it felt kind of nasty to do that. However, this works like a charm. Just note that the inner elements are required to get the actual icon to show up in Foundation 5. That's why the extra span tags are in there.

This wasn't working momentarily due to a typo in my routing configuration. I was using tempalte instead of template.

(face palm)

Angular/Foundation - ng-view inside off-canvas-wrap

Screenshot 1

Screenshot 2

1 Answers1