AngularJS在一个页面中有多个模板

Question

我有一个提供静态标题菜单的索引,在下面是基于路由的ng视图,选择正确的模板.像这样例如:

<navbar>
    ...
</navbar>
<div ng-view>
</div>

到目前为止一切都很好,当一个特定的路线被击中时,一个模板被加载到具有相关控制器的容器中.

现在,我有另一个页面加载到ng-view中,并且当url"/ dashboard"被击中时它被触发.问题是仪表板页面有一个侧边栏菜单,还需要包含一些路由逻辑(或多或少).当从侧边栏菜单中单击链接时,我只需要加载页面的左侧(而不是整个ng-view容器).

我确定了两个解决方案:

1)创建一个存储该侧边栏菜单的指令,并将其注入由侧边栏菜单处理的所有页面中==>路由仍然由ng-view处理.

2)使用ng-include并在仪表板页面中有一些路由逻辑,如下所示:

 <a ng-click="templateType = 1">Template 1</a>
 <a ng-click="templateType = 2">Template 1</a>

 <div ng-if="templateType === 1" ng-include="template1" 
  ng-controller="Template1Controller"></div>
 <div ng-if="templateType === 2" ng-include="template2" 
  ng-controller="Template2Controller"></div>

还有另一种方法吗？或者处理处理某些路线的侧边栏和处理其他路线的静态菜单的最佳做法是什么,并提到侧边栏菜单仅在某些路线上可用.

我提供了绘画,希望能更好地解释我的问题.

Answer 1

您可以使用UI-Router并尝试嵌套视图.这是一个非常好的教程.我想在本教程的最后提到了你想要实现的目标.