As a newcomer to both ui router and angularjs, I'm encountering a specific issue:
Within my header section, the following code is present:
<li ng-class="{active: $state.includes('settings')}" id="header01">
<a ui-sref="settings.personal"> <span id="header02" > Settings</span> </a>
</li>
Additionally, in my main.js file, I have defined the following states:
$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"
});
The issue at hand is that when switching from the personal tab to another tab, the settings in the header become inactive. I am seeking a solution to this problem.
Any assistance or guidance on how to resolve this issue would be greatly appreciated.