截屏1

Question

我似乎有一个基本问题。代码非常简单：

<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>

如果我将ng-view与内容放在一个单独的文件中加载，它会在交互时消失。它最初存在，但在我点击菜单图标（屏幕截图1 ）后它就消失了。在刷新时，内容会恢复，但与画布外菜单的进一步交互会使其再次消失。

如果我取出ng-view元素并将其替换为静态内容，一切正常（屏幕截图2 ）。

截屏1

截屏2

我在这里做错了什么？

Angular 1.4.9
基金会5.5.3

Answer 1

我更改了一行以使其正常工作：

这一行：

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

现在：

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

我打算使用href="javascript:"，但这样做有点讨厌。然而，这就像一个魅力。请注意，内部元素需要在Foundation 5中显示实际图标。这就是额外span标记所在的原因。

由于我的路由配置中存在拼写错误，因此暂时无法正常工作。我使用 tempalte 而不是模板。

（面掌）

角度/基础 - 在画布外包装中的ng-view

截屏1

截屏2

1 个答案: