CODEWITHSUNDEEP
angularjsangular-ui-router
Coder
Coder

Reputation: 7076

UI Router - Set parent to active for all child states when ui-sref is given as link to one child

Hi I have created a AngularJS application. I'm using UI-router. I have one main menu and then sub menu. Main menu I have something like

<ul class="nav nav-pills">
                <li ng-class="{'active':$state.includes('home')}"><a ui-sref="home.main1">Home</a></li>
                <li ui-sref-active="active"><a ui-sref="dashboard.dash1">Dashboard</a></li>
                <li ui-sref-active="active"><a ui-sref="report">Reports</a></li>
                </ul>

For one main menu home I have sub menu as 

<ul class="nav nav-tabs" role="tablist">
<li ui-sref-active="active"><a ui-sref="home.main1">Main 1</a></li>
<li ui-sref-active="active"><a ui-sref="home.main2">Main 2</a></li>
</ul>

And for main menu dashboard i have sub menu as

<ul class="nav nav-tabs" role="tablist">
  <li ui-sref-active="active"><a ui-sref="dashboard.dash1">Dashboard 1</a></li>
  <li ui-sref-active="active"><a ui-sref="dashboard.dash2">Dashboard 2</a></li>
</ul>

In the above, the sub menus becomes active as per URL. but the parent menu is not becoming active.

In dashboard, I set ui-sref-active but the problem is the ui-sref**I set to **dash1 state. So dashboard state becomes active only when dash1 is active, not dash2. In home I tried using ng-class as you can see. But it's not working.

Here is the plnkr Demo.

How to set the parent state active whenever child is active?

Upvotes: 1

Views: 792

Answers (1)

Sunil D.
Sunil D.

Reputation: 18193

<li ng-class="{'active':$state.includes('home')}">

The expression you're using with ng-class above is evaluated in the context of the current $scope. Your controller doesn't define anything on the $scope, so the expression fails.

You can do this to make it work (plunkr):

app.controller('testCtrl', function($scope, $state) {
  console.log($state.current.name);
  $scope.$state = $state;
});

The merits of putting a service on the scope are debatable.

Upvotes: 1

Related Questions