CODEWITHSUNDEEP
angularjsangular-ui-router
Soni Pandey
Soni Pandey

Reputation: 514

Angular-ui-router: ui-sref-active with child active

I am using angular-ui-router and nested states in my application, and I also have a navigation bar. The nav bar is hand written, and uses ui-sref-active to highlight the current state. It is a two-level navigation bar.

Now, when I am in, say Candidate / Settings I would like both Candidate (in level 1) and Setting (in level 2) to be highlighted. However, using ui-sref-active, if I am in state Candidate.Settings then only that state is highlighted, not Candidate.

Candidate have sub-state - > bookmark, applicants Setting have sub-state - > profile, password

I want to make active candidate and bookmark at a time while candidate should redirected to bookmark state on loading time.

I am able to make parent and child state active, but the problem is i want to load child state on clicking on candidate, and candidate and bookmark both should be active.

<ul class="ul-list">
      <li ui-sref-active="current"><a ui-sref="advertiser.candidate" data-ng-click="showPage('candidatePage')">Candidates</a></li>
      <li ui-sref-active="current"><a ui-sref="advertiser.settings" data-ng-click="showPage('settingsPage')">Settings</a></li>
      <li class="hide block bg-green"><a class="nav-link">Help</a></li>
      <li class="hide block bg-green"><a class="nav-link">Contact Us</a></li>
</ul>

<ul>
  <li><a ui-sref-active="current" ui-sref=".bookmarks" data-ng-click="loadCandiatePage('bookmarks')">Bookmarks <span class="sr-only"></span></a></li>
  <li><a ui-sref-active="current"  ui-sref=".applicants" data-ng-click="loadCandiatePage('applicants')"> Applicants</a></li>
  <li><a ui-sref-active="current"  ui-sref=".hired" data-ng-click="loadCandiatePage('hired')">Hired</a></li>
</ul>

Thanks in advance!!!

Upvotes: 4

Views: 3779

Answers (3)

user6664928
user6664928

Reputation:

Step 1: Add a Controller for your nav bar orin your existing controller where nav bar is included add the following

app.controller('navCtrl', ['$scope', '$location', function($scope, $location) {
    $scope.isActive = function(destination) {
        return destination === $location.path();
    }
}]);

Step2: In your nav bar

<li ng-class="{active: isActive('/home')}">
    <a ui-sref="app.home">Browse Journal</a>
</li>

That's it.

Upvotes: 0

Soni Pandey
Soni Pandey

Reputation: 514

.state('advertiser.candidate', {
            url: '/candidate',
            abstract: true,
            defaultChild: 'advertiser.candidate.bookmarks',
            templateUrl: 'modules/users/views/advertiser/menuTabs/candidate/advertiser.candidate.html'
        })
        .state('advertiser.candidate.bookmarks', {
            url: '/bookmarks',
            templateUrl: 'modules/users/views/advertiser/menuTabs/candidate/advertiser.candidate.bookmarks.html'
        })

and click on candidate page i set $state.go('advertiser.candidate.bookmarks'), then it worked for me.

Upvotes: 0

Tristan
Tristan

Reputation: 3321

You can use ng-class to set the desired class name by evaluating the $state.

To use $state if your view you need to make it available on the scope in the controller:

controller('mainCtrl', ['$scope', '$state', function($scope, $state) {
   $scope.$state = $state;
}]);

Or if you want it to be available app wide without setting it in each controller you can define it on $rootScope with .run:

.run(function($rootScope, $state) {
   $rootScope.$state = $state;
})

In your view you can still use ui-sref-active and also use ng-class to evaluate the current state. For example (substitute your application logic):

<li>
    <a ui-sref-active="current" 
      ng-class="{'current': $state.current.name == 'advertiser.candidate'}" 
      ui-sref=".bookmarks" 
      data-ng-click="loadCandiatePage('bookmarks')">
        Bookmarks <span class="sr-only"></span>
    </a>
</li>

Upvotes: 1

Related Questions