Soni Pandey Soni Pandey - 11 months ago 125
AngularJS Question

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>
<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>

Thanks in advance!!!

Answer Source
.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.