AngularJS在一个页面中包含多个模板

我有一个索引，它提供一个静态标题菜单，下面是一个基于路由的ng视图，选择正确的模板。例如：

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

...

到目前为止，一切都很好，当一个特定的路由被点击时，一个模板和相关的控制器被加载到该容器中

现在，我在ng视图中加载了另一个页面，当点击url“/dashboard”时会触发该页面。问题在于，仪表板页面有一个侧栏菜单，它还需要包含一些路由逻辑（或多或少）。当从侧边栏菜单单击链接时，我只需加载页面的左侧（而不是整个ng视图容器）

我确定了两种解决方案：

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>

模板1
模板1

还有别的办法吗？或者，在处理处理某些路由的边栏和处理另一路由的静态菜单时，最好的做法是什么？请注意，边栏菜单仅在某些路由上可用

我提供了一张绘画图，希望能更好地解释我的问题

---

您可以使用UI路由器，并尝试嵌套视图。这是一本书。我认为您试图实现的目标在本教程的最后提到。

正如所有其他人所建议的，您需要使用UI路由器和嵌套视图。这是设置页面布局的好方法

你可以在中找到答案

---

为什么不使用angular ui router？您也可以查看。@nikhil我想可能有一个内置的解决方案，而无需添加另一个外部依赖项。要实现这一点，您必须在很多地方进行黑客攻击。不过，使用angular ui路由器，您的生活将变得轻松、顺利。它提供了很大的灵活性。@nikhil angular ui router似乎是一个非常好的解决方案，但使用它需要重新考虑应用程序中已经存在的所有复杂路由。如果我从项目一开始就使用它，那就太好了。它对我不起作用，因为修改当前应用程序需要大量工作才能使用它们的路由实现。UI-Router与ngRouter没有那么大的不同。它针对路由处理状态，routeParams变成stateParams，ui视图取代原来的ng view指令。然后，您可以使用ui sref（非常有用）或仅使用href引用您的路由。但我理解你的观点。我认为您可以使用ngRoute参数来确定要显示的子元素，但它可能要复杂一些。：）UI路由器看起来很不错，但my app有大约150条不同的路由分布在许多模块上，它需要修改每一条路由以匹配UI路由器的实现。在这一点上，我宁愿为一个侧边栏做一个指令，然后我把它注入到我需要的任何地方。当然可以。您可以考虑在即将到来的项目中使用UI路由器。祝你好运。希望你能找到你想要的答案。