使用Angular.js單擊下一個菜單時無法禁用上一個單擊菜單上的高亮顯示

我遇到問題。我的頁面中有一些菜單，最初着陸頁菜單是高亮顯示的，但是當我移動到下一個菜單時，以前的着陸頁高亮仍然存在，在交換菜單時它應該刪除。我正在使用Angular.js and angular ui-router。我在下面解釋我的代碼。使用Angular.js單擊下一個菜單時無法禁用上一個單擊菜單上的高亮顯示

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

這裏最初，當我點擊settings菜單上的Home菜單亮點應該禁用我的Home菜單被選中，但在我的情況下，它不會發生這樣既這裏點擊第二個菜單後顯示高亮。在這裏我需要當用戶點擊任何菜單，只會突出顯示和着陸頁菜單將突出顯示初始。代碼爲angular-1.4.6 and angularuirouter-0.2.8工作，但我使用angular-1.5.9 and angularuirouter-0.3.2請幫助。

來源

2017-05-31 satya

嘗試做這樣的

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>

來源

2017-05-31 07:56:08

是的，你也可以使用ng-class！ –

我更新了我的帖子.same代碼工作angular-1.4.6和angularuirouter-0.2.8，但我使用angular-1.5.9和angularuirouter-0.3.2，在這裏它不工作。 – satya

@satya你在控制器中注入了'$ state'依賴項嗎？ –

這是預期的行爲。所有父母國家在其子女活躍時都被視爲活躍。所以dashboard在dashboard.setting或dashboard.users處於活動狀態時處於活動狀態。正如the_mishra指出的那樣，您需要另一種突出顯示菜單項的方法。

來源

2017-05-31 14:25:38

我也提到過這個代碼也是按照預期的雛形版本工作。 – satya

使用Angular.js單擊下一個菜單時無法禁用上一個單擊菜單上的高亮顯示

回答

相關問題