Angular-ui-router: Ui-sref-active And Nested States

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

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.

This is the solution:

<li class="myNonActiveStyle" ui-sref-active="myActiveStyle">      <a ui-sref="project.details">Details</a> </li> 

Edit:

The above only works for the exact route path and will not apply the activeStyle to the nested routes. This solution should work for this:

<a data-ui-sref="root.parent" data-ng-class="{ active: $state.includes('root.parent') }">Link</a>