使用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单击下一个菜单时无法禁用上一个单击菜单上的高亮显示

回答

相关问题