我是ui router和angularjs的新手。我面临的问题是 -
在我的标题中
<li ng-class="{active: $state.includes('settings')}" id="header01">
<a ui-sref="settings.personal"> <span id="header02" > Settings</span> </a>
</li>
在我的main.js中我有 -
$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"
});
现在,当我从个人标签更改为任何其他标签时,标题中的设置将变为非活动状态。怎么解决这个问题。
谢谢。
答案 0 :(得分:0)
一种方法是使用state.data
,例如:
.state('settings', {
url: '/settings',
templateUrl: 'settings/settings.html',
data: {
pageTitle: 'Settings'
}
})
然后在您的视图中,您可以访问$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>
但就个人而言,我可能会将导航项置于ng-repeat中,并使用state.data
动态创建页面标题/类,以避免硬编码页面标题。