Angular-ui-router:ui-sref-active 和嵌套状态 [英] Angular-ui-router: ui-sref-active and nested states

问题描述

我正在使用 angular-ui-router和我的应用程序中的嵌套状态，我还有一个导航栏.导航栏是手写的，并使用 ui-sref-active 突出显示当前状态.这是一个两级导航栏.

现在，当我进入时，说 Products/Categories 我想要 Products(在级别 1)和 Categories(在级别2) 突出显示.但是，使用 ui-sref-active，如果我处于 Products.Categories 状态，则仅突出显示该状态，而不是 Products.

有什么方法可以让 Products 在那种状态下突出显示?

解决方案

代替这个-

<a ui-sref="posts.details">帖子</a>

你可以这样做-

<a ui-sref="posts.details">帖子</a>

<小时>

目前它不起作用.这里有一个讨论(https://github.com/angular-ui/ui-router/pull/927) 而且，很快就会添加.

更新:

要使其正常工作，$state 应该在视图中可用.

angular.module('xyz').controller('AbcController', ['$scope', '$state', function($scope, $state) {$scope.$state = $state;}]);

更多信息

更新 [2]:

从 0.2.11 版本开始，它开箱即用.请检查相关问题:https://github.com/angular-ui/ui-router/issues/818

I am using angular-ui-router and nested states in my application, and I also have a navigation bar. The nav bar is hand written, and uses ui-sref-active to highlight the current state. It is a two-level navigation bar.

Now, when I am in, say Products / Categories I would like both Products (in level 1) and Categories (in level 2) to be highlighted. However, using ui-sref-active, if I am in state Products.Categories then only that state is highlighted, not Products.

Is there some way to make Products highlight in that state?

解决方案

Instead of this-

<li ui-sref-active="active">
    <a ui-sref="posts.details">Posts</a>
</li>

You can do this-

<li ng-class="{active: $state.includes('posts')}">
    <a ui-sref="posts.details">Posts</a>
</li>

---

Currently it doesn't work. There is a discussion going on here (https://github.com/angular-ui/ui-router/pull/927) And, it will be added soon.

UPDATE:

For this to work, $state should be available in view.

angular.module('xyz').controller('AbcController', ['$scope', '$state', function($scope, $state) {
   $scope.$state = $state;
}]);

More Info

UPDATE [2]:

As of version 0.2.11, it works out of the box. Please check the related issue: https://github.com/angular-ui/ui-router/issues/818

这篇关于Angular-ui-router:ui-sref-active 和嵌套状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！