当孩子改变时，如何使父母li活跃

Question

I'm new to both ui router and angularjs. The problem I'm facing is -

In my header

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

 <a  ui-sref="settings.personal"> <span id="header02" > Settings</span> </a>    
 </li>

In my main.js i have -

$stateProvider.state("settings",{

abstract: true,
      url: '/Settings',


      templateUrl: 'Settings/settings.html',

 resolve: {

      },


      controller: ['$scope', '$state', 'contacts', 'utils',

        ]
});





$stateProvider.state("settings.personal",{

url:'/Personal',
controller: "settingPersonal",
templateUrl: "Settings/personal.html"
});

$stateProvider.state("settings.additional",{

url:'/Additional',
controller: "settingPersonal",
templateUrl: "Settings/Additional.html"
});

$stateProvider.state("settings.reset",{

url:'/ResetPass',
controller: "myCtrl2 as second",
templateUrl: "Settings/password_reset.html"
});

Now when i change from personal to any other tab, the settings in header becomes inactive. How to solve this.

Thank you.

Answer 1

One approach would be to use state.data , eg:

.state('settings', {
  url: '/settings',
  templateUrl: 'settings/settings.html',
  data: {
    pageTitle: 'Settings'
  }
})

Then in your view you can access $state.current.data :

<li ng-class="{active: $state.current.data.pageTitle('Settings')}">
  <a ui-sref="settings">Settings</a>
</li>

<li ng-class="{active: $state.current.data.pageTitle('About')}">
  <a ui-sref="settings">About</a>
</li>

But personally, i'd probably put the nav items in an ng-repeat, and create the page title/class dynamically with state.data , to avoid hard coding page titles.