Angular-ui-router: ui-sref-active and nested states
Here's an option for when you are nesting multiple states that are not hierarchically related and you don't have a controller available for the view. You can use the UI-Router filter includedByState to check your current state against any number of named states.
<a ui-sref="production.products" ng-class="{active: ('production.products' |
includedByState) || ('planning.products' | includedByState) ||
('production.categories' | includedByState) ||
('planning.categories' | includedByState)}">
Items
</a>
TL;DR: Multiple, unrelated, named states need to apply an active class on the same link and you have no controller? Use includedByState.
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