6

我有一个提供静态标题菜单的索引，下面是一个基于路由的 ng-view 选择正确的模板。像这样的例子：

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

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

我提供了一张油漆图，希望我能更好地解释我的问题。

在此处输入图像描述

4

2 回答 2

8

您可以使用 UI-Router 并尝试嵌套视图。这是一个非常好的教程。我认为本教程末尾提到了您要实现的目标。

于 2015-06-11T11:15:44.743 回答
2

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

您可以在Angular UI-Router 如何创建“布局”状态中找到答案 ？

于 2015-08-11T02:18:48.973 回答