javascript - 使用 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'
    })
});

在这种情况下，当用户单击资源时，它会重定向到以下页面。

<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>

在这里，当用户单击上述页面的任何子菜单时，父菜单(“资源”)将与该子菜单一起激活。请帮助我。

Answer 1

我在 mainCtrl 中创建了自己的 Helper 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>