无法使用 Angular.js 激活菜单栏

Question

我遇到了一个问题。我无法使用 Angular.js 激活右侧菜单栏。我有一些菜单、子菜单和子子菜单，但根据要求我无法激活它们。我在下面解释我的代码。

route.js:

var Admin=angular.module('easyride',['ui.router','ui.bootstrap']);
Admin.run(function($rootScope, $state) {
    $rootScope.$state = $state;
});
Admin.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
    .state('/',{
        url: '/',
    templateUrl: 'login.html',
        controller: 'loginController'
    })
    .state('dashboard',{
        url:'/dashboard',
        templateUrl:'dashboard.html',
        controller:'dashboardController'
    })
    .state('dashboard.settings',{
        url:'/settings',
        templateUrl:'settings.html',
        controller:'settingsController'
    })
    .state('dashboard.settings.area',{
        url:'/area',
        templateUrl:'area.html',
        controller:'areaController'
    })
    .state('dashboard.settings.area.manageState',{
        url:'/manageState',
        templateUrl:'manageState.html',
        controller:'manageStateController'
    })
    .state('dashboard.settings.area.manageCity',{
        url:'/manageCity',
        templateUrl:'manageCity.html',
        controller:'manageCityController'
    })
})

这里实际上当用户进入内页时默认Home table会激活。当用户单击 settings 菜单时，相应的子菜单 Manage Area 和 sub-sub-menu Manage State 选项卡保持活动状态。我在下面解释我的页面。

dashboard.html:

<div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <!--<li ui-sref-active="active" ><a ui-sref="dashboard">Home</a></li>-->
              <li ui-sref-active="active"><a ui-sref="dashboard">Home</a></li>
              <li ng-class="{'active open': $state.includes('dashboard.settings.area')}"><a ui-sref="dashboard.settings.area.manageState">Settings</a></li>


            </ul>
          </div>

Here is my full plunkr working code。在这里，我需要当用户单击 settings 菜单时，相应的 sub-menu and sub-sub-menu 将保持活动状态，而其他人将处于非活动状态，这在我的情况下不会发生。请帮忙

Answer 1

以下面的例子为例，我是如何激活子菜单及其菜单的。我想这可能对您有所帮助。

基于"stateName"应用"active"class，我们从“$state”提供商的应用程序控制器获得，基于此我正在使用ng-class激活菜单及其子菜单的指令。

<li uib-dropdown ng-class="{'active':($root.stateName.indexOf('dashboard.settings')>=0)}">
    <a href uib-dropdown-toggle>Settings <span class="caret"></span></a>
    <ul role="menu" uib-dropdown-menu >
        <li ng-class="{'active':($root.stateName.indexOf('dashboard.settings.area.manageCity')>=0)}">
           <a ui-sref="dashboard.settings.area.manageCity">Manage City</a>
        </li>
        <li ng-class="{'active':($root.stateName.indexOf('dashboard.settings.area.manageState')>=0)}">
            <a ui-sref="dashboard.settings.area.manageState">Manage State</a>
        </li>
        </ul>
</li>

和

在您的控制器文件中，请使用以下代码设置状态名称。

module.registerController('TopicController', function ($state, $rootScope) {
      $rootScope.stateName = $state.current.name;//This line in all routes controller.
});

这是一个 Plunkr link：编辑了您的代码。 https://plnkr.co/edit/bFhvod7zf8JgnEAuH6oo?p=preview

您已在仪表板页面本身中添加了导航，因此最好将导航与实际视图分开。请检查以上Plunkr。

无法使用 Angular.js 激活菜单栏

Could not active the menu bar using Angular.js

jquery

angularjs

angular-ui-router

angular-ui-bootstrap