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

Posted 2023-05-09

【中文标题】无法使用 Angular.js 激活菜单栏

【英文标题】：Could not active the menu bar using Angular.js

【发布时间】：2018-07-01 01:04:14

【问题描述】：

我遇到了一个问题。我无法使用 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 表将处于活动状态。当用户单击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 将保持活动状态，而其他将不活动，这在我的情况下不会发生。请帮忙。

【参考方案1】：

以下面的示例为例，我如何激活子菜单及其菜单。我猜这可能会对你有所帮助。

根据我们从“$state”提供程序的应用程序控制器获得的“stateName”应用“活动”类，基于此，我正在使用 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> 

还有

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

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

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

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

【讨论】：

我需要在哪个文件中更改它。你能编辑这个 plunkr 吗？

请格式化您的代码。它不可读。我认为您删除了某些部分。

不，这不是我想要的。我有这样的结构Menu->sub-menu->sub-sub-menu。

那么你必须先在你的问题中提到你想要的相同结构。

请检查 Plunkr 链接。