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

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模块的单独控制器
用于标题菜单或templateProvider单独templateUrl来预测动态菜单（如果您具有用户角色限制等）

错误的做法：

ng-include和ng-controller

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

问题描述

5 个解决方案

解决方案1
3 已采纳 2014-06-06 12:54:10

解决方案2
1 2014-06-06 12:57:34

解决方案3
0 2014-06-06 12:54:31

解决方案4
0 2015-11-04 09:31:51

解决方案5
0 2015-11-04 09:59:49

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

问题描述

5 个解决方案

解决方案1 3 已采纳 2014-06-06 12:54:10

解决方案2 1 2014-06-06 12:57:34

解决方案3 0 2014-06-06 12:54:31

解决方案4 0 2015-11-04 09:31:51

解决方案5 0 2015-11-04 09:59:49

解决方案1
3 已采纳 2014-06-06 12:54:10

解决方案2
1 2014-06-06 12:57:34

解决方案3
0 2014-06-06 12:54:31

解决方案4
0 2015-11-04 09:31:51

解决方案5
0 2015-11-04 09:59:49