У меня есть одна проблема. Я использую Angle.js ui-router
для отображения вложенных представлений. В моем случае у меня есть одно родительское меню, и у него есть некоторые подменю. Позвольте мне объяснить мой код ниже.
dashboard.html:
<li ui-sref-active="active" ><a ui-sref="dashboard">Home</a></li>
<li ui-sref-active="active">
<a ui-sref=".res.userrole">Resource Management</a>
</li>
Здесь Resource Management
- это мое родительское меню, и его подменю приведены ниже.
res.html:
<tabset>
<tab ui-sref="dashboard.res.userrole" ui-sref-active="active">
<tab-heading>Add User Role</tab-heading>
</tab>
<!--<tab ui-sref="dashboard.res.course" ui-sref-active="active">
<tab-heading>Add Course</tab-heading>
</tab>-->
<tab ui-sref="dashboard.res.class" ui-sref-active="active">
<tab-heading>Add Class</tab-heading>
</tab>
<tab ui-sref="dashboard.res.section" ui-sref-active="active">
<tab-heading>Add Section</tab-heading>
</tab>
<tab ui-sref="dashboard.res.session" ui-sref-active="active">
<tab-heading>Add Session</tab-heading>
</tab>
<tab ui-sref="dashboard.res.unit" ui-sref-active="active">
<tab-heading>Add Unit</tab-heading>
</tab>
</tabset>
<div ui-view></div>
Loginroute.js:
.state('dashboard.res', {
url: '/res',
templateUrl: 'dashboardview/res.html',
controller: 'resController'
})
.state('dashboard.res.userrole', {
url: '/userrole',
templateUrl: 'dashboardview/userrole.html',
controller: 'resourceuserroleController'
})
.state('dashboard.res.class', {
url: '/class',
templateUrl: 'dashboardview/class.html',
controller: 'resourceclassController'
})
.state('dashboard.res.section', {
url: '/section',
templateUrl: 'dashboardview/section.html',
controller: 'resourcesectionController'
})
.state('dashboard.res.session', {
url: '/session',
templateUrl: 'dashboardview/session.html',
controller: 'resourceSessionController'
})
.state('dashboard.res.unit', {
url: '/unit',
templateUrl: 'dashboardview/unit.html',
controller: 'resourceunitController'
})
Здесь моя проблема в том, что когда я перезагружаю любую страницу из вышеуказанного подменю, первое подменю ("ie-Add User Role") становится активным классом вместе с обновляемой страницей подменю. Так как я получаю два подменю являются активными. Мне нужно, если пользователь перезагружает любую страницу подменю, что заголовок подменю останется активным. Пожалуйста, помогите мне решить эту проблему.
Вот идея с использованием $ state.includes().
например:
if state is /home/:id, Home tab will be activated.
if state is /home/sub/:id, Home and Home sub tabs will be activated
пример кода:
<ul class="nav navbar-nav">
<li ng-class="{active: $state.includes('home')}" class="active"><a ui-sref="home" href="/">Home</a></li>
<li ng-class="{active: $state.includes('home.sub')}" ><a ui-sref="home.sub" href="/">Home sub</a></li>
<li ng-class="{active: $state.includes('reports')}" ><a ui-sref="reports" href="/admin/reports">Reports</a></li>
<li ng-class="{active: $state.includes('users')}" ><a ui-sref="users" href="/admin/users">Users</a></li>
<li ng-class="{active: $state.includes('groups')}" ><a ui-sref="groups" href="/admin/groups">Groups</a></li>
Надеюсь, это поможет вашему делу.