Question

我有一个问题。我使用Angular.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'
    })

这里我的问题是当我重新加载上述子菜单的任何页面时，第一个子菜单（即“添加用户角色”）正在获得活动类以及刷新子菜单页面。所以在我得到两个子菜单的时间是活动的。如果用户正在重新加载任何子菜单页面，子菜单标题将保持活动状态，我需要。请帮我解决此问题。

Answer 1

这是一个使用$ state.includes（）的想法。

e.g：

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>

希望这对您的案件有所帮助。

使用angular.js重新加载页面时获取多个选择

1 个答案: