CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
Bazinga
Bazinga

Reputation: 11244

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 = function() {  
   return $state.includes('playLotteries.Index') 
       || $state.includes('playLotteries.Group')  
       || $state.includes('playLotteries.hunter');
   }

This is very ugly way and I have many children so its not seems like good solution. Anyone have another solution for this problem?

Upvotes: 5

Views: 7784

Answers (4)

Kieran
Kieran

Reputation: 18059

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

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

Learn more about the uiSrefActive directive

Upvotes: 1

simon04
simon04

Reputation: 3312

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

<a ui-sref-active="current" ui-sref="home.index">Home</a>
<a ui-sref-active="current" ui-sref="home.child1">Home » Child1</a>
<a ui-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:

<li ui-sref-active="current">
  <a style="display:none" ui-sref="home"></a>
  <a ui-sref="home.index">Home</a>
</li>
<li ui-sref-active="current">
  <a ui-sref="home.child1">Home » Child1</a>
</li>
<li ui-sref-active="current">
  <a ui-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.

Upvotes: 1

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123901

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
<a ui-sref-active="current" href="#/home">
<a ui-sref-active="current" href="#/home/child1">
<a ui-sref-active="current" href="#/home/child2">

But these will be working:

// conjunction ui-sref and ui-sref-active is working
<a ui-sref-active="current" ui-sref="home">
<a ui-sref-active="current" ui-sref="home.child1">
<a ui-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

Upvotes: 12

Asik
Asik

Reputation: 7977

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

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

Upvotes: 6

Related Questions