paj28 paj28 - 5 months ago 496
AngularJS Question

Angular-ui-router: ui-sref-active and nested states

I am using

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?

Answer

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

Comments