使用Angular.js

时间:2017-05-31 07:45:08

标签: javascript angularjs angular-ui-router

我的页面中有一些菜单,最初登陆页面菜单突出显示但是当我移动到下一个菜单时,之前的登陆页面突出显示仍然存在于交换菜单时应该删除的位置。我正在使用Angular.js和angular ui-router。我在下面解释我的代码。

<li ui-sref-active="active"><a ui-sref="dashboard">Home</a></li>
<li ng-class="{'active open': $state.includes('dashboard.setting')}"><a ui-sref="dashboard.setting.cat" >Settings</a></li>
 <li ng-class="{'active open': $state.includes('dashboard.users')}"><a ui-sref="dashboard.users.view" >User Info</a></li>

我的配置文件如下所示。

route.js:

var Admin=angular.module('connector',['ui.router', '720kb.datepicker','ngMessages','ngCapsLock','ui.bootstrap','ngFileUpload','angularUtils.directives.dirPagination','angularjs-dropdown-multiselect']);
Admin.run(function($rootScope, $state) {
      $rootScope.$state = $state;
});
Admin.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
     .state('/', { 
          url: '/',
          templateUrl: 'view/login.html',
              controller: 'loginController'
        })
        .state('dashboard', { 
        url: '/dashboard',
            templateUrl: 'view/dashboard.html',
            controller: 'dashboardController'
    })
    .state('dashboard.setting', { 
        url: '/setting',
        templateUrl: 'view/setting.html',
        controller: 'adminSettingController'
      })

    .state('dashboard.setting.cat', { 
        url: '/manage_category',
        templateUrl: 'view/manage_category.html',
        controller: 'adminCatCategoryController'
      })

    .state('dashboard.setting.subcat', {
        url: '/manage_subcategory',
        templateUrl: 'view/manage_subcategory.html',
        controller: 'adminSubcatCategoryController'
      })
});

最初点击Home菜单时,我settings菜单突出显示Home菜单突出显示应禁用但在我的情况下,此处未发生这样的情况,两者都显示在突出显示之后点击第二个菜单。

此处我需要用户点击任何只会突出显示的菜单,着陆页面菜单会突出显示最初的。angular-1.4.6angularuirouter-0.2.8的代码,但我使用的是angular-1.5.9angularuirouter-0.3.2

2 个答案:

答案 0 :(得分:0)

尝试这样做

JS:

.run(function ($state,$rootScope) {
  $rootScope.$state = $state;
 })

HTML:

<li class="{{$state.current.name == 'dashboard.setting'?'active open':''}}">
  <a ui-sref="dashboard.setting.cat" >Settings</a>
</li>

答案 1 :(得分:0)

这是预期的行为。当孩子活跃时,所有父母州都被认为是活跃的。因此dashboarddashboard.setting处于活动状态时,dashboard.users处于有效状态。你需要一种替代方法来突出显示菜单项,正如the_mishra指出的那样。