How to make parent li active when the child changes

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.

Answers


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.


Need Your Help

How to include large set of data with my iOS app at install?

ios plist

I have a big database of data I want my app to install with, too big for NSDefaults, essentially it's too big for me to type in (it's computer generated).