Angular Ui Router Ui-sref-active On Parent

I have one parent state and many childs states. If I want the ui-sref-active on the parent to work when I am on one of the child I need to do this 'hack': $scope.isActive = functio

Solution 1:

There is a UI-Router directive:

ui-sref-active="class-name-to-use"

which from a version 0.2.11 does exactly what we need:

uiSrefActive:

BREAKING CHANGE: Also activate for child states. (bf163ad, closes #818) uiSrefActiveEq: new directive with old ui-sref-active behavior

so, if we want just assign class for exact match, we have to use this: ui-sref-active-eq="class-name-to-use"

So, why are you experiencing: this is not working?

Because it is working only in conjunction with ui-sref directive.

There is a working plunker

These won't work as expected:

// NOT working as expected
<aui-sref-active="current"href="#/home"><aui-sref-active="current"href="#/home/child1"><aui-sref-active="current"href="#/home/child2">

But these will be working:

// conjunction ui-sref and ui-sref-active is working
<aui-sref-active="current"ui-sref="home"><aui-sref-active="current"ui-sref="home.child1"><aui-sref-active="current"ui-sref="home.child2">

Check it in action here. Example uses this UI-Router 0.2.12 release - and this zip

EXTEND: Parent should be abstract, some of its children should always be selected

In that case, we can use another feature of the UI-Router, the: $urlRouterProvider.when().

There is extended plunker So, with state definition like this:

// when'home' is selected ... 'home.child2' is used for redirection 
$urlRouterProvider.when('/home', '/home/child2');
// instead of 'other' - its 'other.child2' is used... could be any (e.g. other.child1)
$urlRouterProvider.when('/other', '/other/child2');

$urlRouterProvider.otherwise('/home/child2'); 

So, now, always child is selected (even if navigating to parent) and parent is getting its ui-sref-active. Check it here

Solution 2:

You can check parent state only instead of checking all child states

$scope.isActive = function() {  
   return$state.includes('playLotteries');
}

Solution 3:

Extending Radim Köhler's post. In case you are using an index state with an abstract parent state, such as

<aui-sref-active="current"ui-sref="home.index">Home</a><aui-sref-active="current"ui-sref="home.child1">Home » Child1</a><aui-sref-active="current"ui-sref="home.child2">Home » Child2</a>

… and want "Home" to be displayed as active when being on home.child1, you could make use of a CSS-hidden first ui-sref:

<liui-sref-active="current"><astyle="display:none"ui-sref="home"></a><aui-sref="home.index">Home</a></li><liui-sref-active="current"><aui-sref="home.child1">Home » Child1</a></li><liui-sref-active="current"><aui-sref="home.child2">Home » Child2</a></li>

This works since "ui-sref-active can live on the same element as ui-sref or on a parent element. The first ui-sref-active found at the same level or above the ui-sref will be used." per ui-sref-active reference

See this plunker for a demo.

Solution 4:

ui-sref-active can take an object using a *[wild card] to match child states. This will work with abstract states.

<liui-sref-active="{'active':'playLotteries.**'"><span>section</span><ul><liui-sref-active="playLotteries.Index"><aui-sref="playLotteries.Index">Index</a></li><liui-sref-active="playLotteries.Group"><aui-sref="playLotteries.Group">Group</a></li><liui-sref-active="playLotteries.hunter"><aui-sref="playLotteries.hunter">hunter</a></li></ul></li>

Learn more about the uiSrefActive directive