Question

我的index.html看起来基本上是这样的：

<body>
  <header ng-controller="navCtrl">
    <!-- quite a bit of html for the menu -->
  </header>
  <div ng-view>
  </div>
</body>

由于我无法在一个页面上使用多个ng-view，我想知道将菜单（<header />）移动到局部的最佳方法是什么，这样我的index.html保持良好状态清洁？

Answer 1

一种方法是使用 ng-include ：

<header ng-include src="'partials/topbar.htm'">
</header>

Answer 2

您可以将菜单标题作为指令。指令包括他们自己的模板，因此您可以封装功能，并且可以在其他页面上重复使用。

即：<header main-nav></header>，其中main-nav是你的指令，可以做任何需要做的事情。

Answer 3

您是否考虑过使用ui-router？它使你所说的超级简单，因为你可以拥有多个ui视图，你可以将导航分成一个，将应用分成另一个。它非常棒，我强烈推荐。

Answer 4

如果您添加的菜单仅在应用程序中使用过一次，请不要创建指令。当您想避免重复代码时，应使用指令。您可能会继续开发另一个应用程序，然后您可能需要一个菜单。但是在这一点上没有什么可以告诉你该应用程序将使用相同的导航。使用带有ng-view的angularjs中的路由。如果需要，在菜单部分添加所需的任何角度，以突出显示菜单中的链接。如果主页面变大，则将菜单区域移动到ng-include中。

Answer 5

正确方法：

安装ui-router，允许您使用多视图
ui-router单独的视图放置在顶层模块中
header模块的单独控制器
将templateUrl分隔为标题菜单，或templateProvider预测动态菜单（如果您有用户角色限制等）。

糟糕的做法：

ng-include

ng-controller

AngularJS：在index.html中包含部分菜单

5 个答案: