Angular UI路由器:导航到嵌套视图时,如何让父视图"活动"？

Question

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

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

默认情况下(或者如果单击它),路由1处于"活动"状态.当您单击"显示列表"时,您将看到路由1不再处于活动状态.

编辑:

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

Answer 1

编辑更新的ui-router 0.2.13:

ui-sref-active="active"现在,当当前状态是ui-sref的状态或任何子节点时,设置'active'类

ui-sref-active-eq="active" 表现为ui-sref-active的先前迭代,并且仅为精确状态设置类

原答案:

请参阅开放的ui-router问题:https: //github.com/angular-ui/ui-router/issues/704和818

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

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

当然,$ state必须添加到$ scope.请参阅更新的插件:http://plnkr.co/edit/KHLDJP？p = preview

Answer 2

你对ui-sref-active ="active"有错误的理解

<li ui-sref-active="active"><a ui-sref="route1">Route 1</a></li>

只有当您处于route1状态时(参考https://github.com/angular-ui/ui-router/wiki/Quick-Reference#wiki-ui-sref-active),这将显示特殊的css突出显示.单击路径1时就是这种情况.但是当您单击"显示列表"时,您不再位于route1中.相反,你处于"route1.list"状态.您可以通过编写以下代码来验证这一点.这完全是为了理解国家的运作方式.

JS

内部控制器

$rootScope.currentState = $state.$current.name //using rootScope so that you can access the variable anywhere inside html

在HTML内部

{{currentState}}

如果仔细查看ui-sref-active的文档,它不仅会查看stateName而且还会查看stateParams,因此当你转到它时它不再改变css.从源代码开始变得更加清晰.

 function update() {
        if ($state.$current.self === state && matchesParams()) {
          $element.addClass(activeClass);
        } else {
          $element.removeClass(activeClass);
        }// route1===route1.list will not be true.

要解决此问题,请记住范围变量是在嵌套视图中继承的.

路线控制器内部.

$scope.route1Active = true;

在HTML中

<li ng-class={active:route1Active}><a ui-sref="route1">Route 1</a></li>

Answer 3

Angular UI路由器现在支持此功能.请参阅提交https://github.com/angular-ui/ui-router/commit/bf163ad6ce176ce28792696c8302d7cdf5c05a01