角导航：为不同的视图显示不同的子导航答案

【问题标题】：Angular navigation: Show different sub navigation for different views角导航：为不同的视图显示不同的子导航
【发布时间】：2013-09-29 19:04:04
【问题描述】：

在我的应用程序中，我有一个跨页面/视图一致的菜单，以及一个显示每个主页/视图的不同链接（指向更多嵌套子页面）的子菜单。我不确定如何更改子菜单。目前，我在body 中有菜单和子菜单，还有一个 ng-view 元素。

首先，我想我会为子菜单制作一个控制器，然后循环显示要显示的子页面数组，并随着主页面/视图的变化更新数组。不过，这似乎既麻烦又不直观，因为我必须在这个单独的控制器中为每个页面保留一个子页面列表，而实际上，它们是主页/视图逻辑的一部分，不是吗？再说一次，我已经阅读了 Angular ui 路由器及其嵌套视图的实现——我是否应该将子菜单作为嵌套视图来处理？

我知道看到我的实际代码会哭，但我更纠结于如何解决这个问题，而不是如何实现它。在我看来，像每个页面/视图更改子菜单这样的问题一定是一个足够常见的问题，对于如何解决它有很好的建议。

【问题讨论】：

标签： javascript angularjs model-view-controller

【解决方案1】：

我不确定我是否正确理解了您的情况 - 我将假设有一个顶级导航栏，其中每个导航栏项目都有一组子项目（一个子导航栏）。此外，每个顶级导航栏项目代表一个不同的功能区域，因此每个都有自己的模型。希望这与您的情况相近。鉴于此，我认为您可以为每个顶级导航栏项目（即每个功能区域）设置一个单独的控制器。这些控制器中的每一个都将是您的顶级控制器的子控制器，并且每个控制器都可能有自己的子控制器。换句话说，它可能会帮助您根据不同的功能区域来考虑您的应用程序，并为每个区域使用 MVC 模式。与使用单个控制器来表示所有内容相比，这可能会使您的应用程序更容易推理，并且更容易编写测试。

希望对你有帮助。

【讨论】：

对于我遇到的这个具体问题，无论用户在层次结构中有多深，子菜单都应始终列出页面具有的任何子页面。我认为您尝试将它们按功能区域分组的方法是合理的建议。在这种情况下，我会将进入子菜单的项目作为主控制器的某种“属性”，是吗？
是的，这就是我的想法。作为我所想的更具体的示例，请访问 stackexchange.com/sites 获取示例。您可以将“所有站点”、“热门问题”、“过滤问题”等选项视为不同的功能区域，每个区域都有自己的控制器支持（也暗示了自己的范围和模型）。每个都可能有自己的菜单选项 - 例如，“所有站点”将具有“全部”、“技术”、“文化”等。您可以将该列表表示为 AllSitesCtrl 的一个属性（假设它相当简单处理该级别的用户交互）。
鉴于我的问题在概念层面上寻求帮助时相当模糊，我认为您的回答在尝试分类和处理这个问题时对我的帮助最大。我会尝试实施不同的建议，看看哪种感觉最适合这种情况。

【解决方案2】：

这是个好问题。我认为主要流程使用路线，内部面板使用小部件。创建编译模板的指令。我构建了一个动态小部件，您可以在 here 中了解它

【讨论】：

所以基本上你建议添加一个呈现子菜单的指令，它会根据 $location 的变化而更新，例如？

【解决方案3】：

您可以为每个子菜单使用 ngShow 指令，并使用代码来决定它是否应该显示。您可能需要为每个可能显示或不显示的子菜单设置不同的功能。需要隐藏。

【讨论】：

这是一个选项，但感觉更像是试图绕过问题而不是解决问题。尽管如此，还是感谢您的建议。