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;
}]);
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