Angular UI Router:如何让父视图“活跃"?导航到嵌套视图时? [英] Angular UI Router: How do I get parent view to be "active" when navigating to nested view?

问题描述

我正在开发一个已经实现 UI 路由器的项目，它使用 ui-sref-active="active" 将活动类添加到导航菜单项，当该项目是当前路线.但是，当您导航到该视图中的嵌套视图时，父菜单项不再处于活动状态.请参阅以下 Plunker:

I'm working on a project that has implemented the UI router and it's using ui-sref-active="active" to add the active class to the navigation menu item when that item is the current route. However, when you navigate to a nested view within that view, the parent menu item is no longer active. See the following Plunker:

http://plnkr.co/edit/2CoEdS?p=preview

默认情况下(或者如果您单击它)Route 1 是活动的".当您点击显示列表"时，您会看到 Route 1 不再处于活动状态.

By default (or if you click on it) Route 1 is "active". When you click on "Show List," you will see that Route 1 is no longer active.

这个例子和我的实际项目的唯一区别是我的实际项目中的导航菜单有自己的控制器，因此不使用与route1"控制器相同的范围.

The only difference between this example and my actual project is that the navigation menu in my actual project has its own controller and so does not use the same scope as the controller for "route1".

推荐答案

编辑更新 ui-router 0.2.13:

ui-sref-active="active" 现在在当前状态是 ui-sref 的状态或任何子节点

ui-sref-active="active" now sets the 'active' class when the current state is the ui-sref's state or any child

ui-sref-active-eq="active" 行为与 ui-sref-active 的先前迭代相同，并且只为确切状态设置类

ui-sref-active-eq="active" behaves as the previous iterations of ui-sref-active, and only sets the class for the exact state

原答案:

查看打开的 ui-router 问题:https://github.com/angular-ui/ui-router/issues/704 和818

See open ui-router issues: https://github.com/angular-ui/ui-router/issues/704 and 818

人们建议的一般解决方法是:

A general workaround people are suggesting is:

ng-class="{active:$state.includes('route1')}"

当然，$state 必须添加到 $scope.查看更新的 plunk:http://plnkr.co/edit/KHLDJP?p=preview

Of course, $state must be added to $scope. See updated plunk: http://plnkr.co/edit/KHLDJP?p=preview

这篇关于Angular UI Router:如何让父视图“活跃"?导航到嵌套视图时?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！