當使用angular.js點擊子菜單時，無法激活父菜單

Question

我需要一個幫助。我需要用戶點擊子菜單時，父菜單隨它一起激活。請檢查下面的代碼。

dashboard.html：

<ul class="nav navbar-nav" ng-class="{active: $state.includes('dashboard')}"> 
    <li ui-sref-active="active" ><a ui-sref=".profile">College Profile</a></li> 
    <li ui-sref-active="active" ><a ui-sref=".stream">College stream</a></li> 
    <li ui-sref-active="active"><a ui-sref=".dept" >College Department</a></li> 
    <li class="dropdown " ng-class="{active:$state.includes('dashboard.res')}"> 
    <a ui-sref=".res.userrole" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Resource <span class="caret"></span></a> 
    </li> 
    <li ui-sref-active="active"><a ui-sref=".usermanagement">User Management</a></li> 
    <li ui-sref-active="active"><a ui-sref=".role">User Role</a></li> 

    </ul> 
<div class="row" style="padding-top:120px;" ui-view> 
       <p>Welcome to Gofasto.</p> 
       <p>Admin can create college and register the users in this page.</p>  
     </div> 

app.js：

在此條件下

var Admin=angular.module('Channabasavashwara',['ui.router', '720kb.datepicker','ngMessages','ngCapsLock']); 
Admin.config(function($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/'); 
    $stateProvider 
    .state('/', { 
      url: '/', 
      templateUrl: 'dashboardview/login.html', 
      controller: 'loginController' 
     }) 
     .state('dashboard', { 
      url: '/dashboard', 
      templateUrl: 'dashboardview/dashboard.html', 
      controller: 'dashboardController' 
     }) 
     .state('dashboard.profile', { 
     url: '/profile', 
     templateUrl: 'dashboardview/profile.html', 
     controller: 'profileController' 
    }) 
    .state('dashboard.dept', { 
     url: '/dept', 
     templateUrl: 'dashboardview/dept.html', 
     controller: 'deptController' 
    }) 
    .state('dashboard.princpal', { 
     url: '/princpal', 
     templateUrl: 'dashboardview/princpal.html', 
     controller: 'princpalController' 
    }) 
    .state('dashboard.usermanagement', { 
     url: '/user', 
     templateUrl: 'dashboardview/usermangement.html', 
     controller: 'managementController' 
    }) 
    .state('dashboard.role', { 
     url: '/role', 
     templateUrl: 'dashboardview/role.html', 
     controller: 'roleController' 
    }) 
    .state('dashboard.stream', { 
     url: '/stream', 
     templateUrl: 'dashboardview/stream.html', 
     controller: 'streamController' 
    }) 
    .state('dashboard.resource', { 
     url: '/resource', 
     templateUrl: 'dashboardview/resource.html', 
     controller: 'resourceController' 
    }) 
    .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.course', { 
     url: '/course', 
     templateUrl: 'dashboardview/course.html', 
     controller: 'resourcecourseController' 
    }) 
}); 

這裏當用戶點擊Resource它被重定向到下面頁。

<div class="container"> 
<div class="codrops-top"> 
<span class="right"> 
<a href="#"> 
<strong>Select below options to choose the form</strong> 
</a> 
</span> 
</div><!--/ Codrops top bar --> 
<header> 

<nav class="codrops-demos"> 
<ul class="nav nav-sidebar" ng-class="{active: $state.includes('dashboard')}" > 
<li ui-sref-active="active"><a ui-sref=".userrole">Add User Role</a></li> 
<li ui-sref-active="active"><a ui-sref=".course">Add Course</a></li> 
<li ui-sref-active="active"><a ui-sref=".submenu3">Submenu3</a></li> 
</ul> 
</nav> 
</header> 
<div ui-view> 

</div> 
</div> 

在這裏，我需要的時候用戶會點擊上面的頁面上一級菜單（「資源」）的任何兒童菜單將與這個孩子一起積極menu.Please幫助我。

Answer 1

我mainCtrl創建自己的助手的Funktion像：

menueActive(mainMenueName) { 
     return this.$state.includes(mainMenueName); 
    } 

路由配置：

 this.$stateProvider 
      .state('NotAuthorized', { 
       url: "/NotAuthorized", 
       templateUrl: "Account/NotAuthorized" 
      }) 
      .state("User", { 
       url: "/User", 
       templateUrl: "User/UserMenue" 
      }) 
      .state("User.User", { 
       url: "/User?{id:int}", 
       templateUrl: "User/User" 
      }) 
      .state("User.Accounts", { 
       url: "/Accounts?{id:number}", 
       templateUrl: "User/Accounts" 
      }) 
      .state("Permission", { 
       url: "/Permission", 
       templateUrl: "Permission/PermissionMenue" 
      }) 

用法：

  <li ng-class="{active: main.menueActive('Permission')}"> 
       <a ui-sref="Permission.Matrix" title="Permission"> 
        <i class="fa fa-lock"> 
        </i> 
        &nbsp;Permission 
       </a> 
      </li> 
      <li ng-class="{active: main.menueActive('User')}"> 
       <a ui-sref="User.User" title="User"> 
        <i class="fa fa-user"> 
        </i> 
        &nbsp;User 
       </a> 
      </li> 
     </ul>