Question

我在使用Angular.js ui-router时遇到一个问题。我添加了active类来突出显示菜单，但它无效。我正在解释下面的代码。

<ul class="nav navbar-nav">

           <li ui-sref-active="active" ><a ui-sref=".profile">College Profile</a></li>
<li ng-class="{active: $state.includes('dashboard.deptmanagement')}"><a ui-sref="dashboard.deptmanagement.stream" >Department Management</a></li>
<li  ui-sref-active="active">
            <li ui-sref-active="active"><a ui-sref="dashboard.user.usermanagement">User Management</a></li>
             <li ui-sref-active="active"><a ui-sref="dashboard.plan.contime">Plan Management</a></li>

          </ul>

我的问题出在上面代码的Department Management菜单中。如果我在这里添加ui-sref-active="active"这个菜单有一些子菜单，当子菜单选择此菜单时无法获得问题任何活动的类。此父菜单的子菜单如下所示。

deptmanagement.html：

    <div>
     <tabset>
    <tab ui-sref=".stream" ui-sref-active="active">
      <tab-heading>Add Stream</tab-heading>
    </tab>
    <tab ui-sref=".dept" ui-sref-active="active">
      <tab-heading>Add Department</tab-heading>
    </tab>
    <tab ui-sref=".course" ui-sref-active="active">
      <tab-heading>Add Course</tab-heading>
    </tab>
    <tab ui-sref=".sub" ui-sref-active="active">
      <tab-heading>Add Subject</tab-heading>
    </tab>
  </tabset>
  <div ui-view></div>
</div>

loginroute.js

var Admin=angular.module('Channabasavashwara',['ui.router', '720kb.datepicker','ngMessages','ngCapsLock','ui.bootstrap']);
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.deptmanagement', {
        url: '/deptmanagement',
        templateUrl: 'dashboardview/deptmanagement.html',
        controller: 'deptmanagementController'
    })
    .state('dashboard.deptmanagement.stream', {
        url: '/stream',
        templateUrl: 'dashboardview/stream.html',
        controller: 'streamController'
    })
    .state('dashboard.deptmanagement.course', {
        url: '/course',
        templateUrl: 'dashboardview/course.html',
        controller: 'resourcecourseController'
    })
    .state('dashboard.deptmanagement.sub', {
        url: '/subject',
        templateUrl: 'dashboardview/subject.html',
        controller: 'deptsubjectController'
    })
    .state('dashboard.deptmanagement.dept', {
        url: '/dept',
        templateUrl: 'dashboardview/dept.html',
        controller: 'deptController'
    })
})

这里我的要求是当上面任何一个子菜单选择主菜单保持高亮时。请帮我解决这个问题。

Answer 1

使用ng-class="{'active':$state.includes('route1')}"导航$state需要对视图可用，即在控制器中的$scope上定义。

$scope.$state = $state;

您可以定义$rootScope.$state = $state;，以便在整个应用中$rootScope都可以使用mainCtrl，但这可能被视为不良做法。

如果你的控制器是Admin.controller('mainCtrl', ['$scope', '$state', function($scope, $state) { $scope.$state = $state; }]);，那么：

.run()

或者，如果您想在$ rootScope上定义$ state，可以使用Admin.run(function($rootScope, $state) { $rootScope.$state = $state; })

<div> 
<tabset> 
<tab ui-sref="dashboard.deptmanagement.stream" active="$state.current.name == 'dashboard.deptmanagement.stream'"> 
<tab-heading>Add Stream</tab-heading> 
</tab> 
<tab ui-sref="dashboard.deptmanagement.dept" active="$state.current.name == 'dashboard.deptmanagement.dept'"> 
<tab-heading>Add Department</tab-heading> 
</tab> 
<tab ui-sref="dashboard.deptmanagement.course" active="$state.current.name == 'dashboard.deptmanagement.course'"> 
<tab-heading>Add Course</tab-heading> 
</tab> 
<tab ui-sref="dashboard.deptmanagement.sub" active="$state.current.name == 'dashboard.deptmanagement.sub'"> 
<tab-heading>Add Subject</tab-heading> 
</tab> 
</tabset> 
<div ui-view></div> 
</div>

由于子菜单是一个标签集，您可以比较每个标签的当前状态名称以设置活动标签

System.config({

    // New configuration
    transpiler: 'typescript',
    typescriptOptions: {
        emitDecoratorMetadata: true
    },

    map: { //map tells the System loader where to look for things
        people: "./src"
    },

    packages: { people: { main: './app.ts', defaultExtension: 'ts' }}

    // Original configuration
//    packages: {'app': {defaultExtension: 'js'}}
});

使用Angular.js ui-router时，活动类无法正常工作

1 个答案: