Question

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

route.js：

<div class="post-search">
  <?php $form = ActiveForm::begin([
    'action' => ['index'],
    'method' => 'get',
   ]); ?>

  <?= $form->field($model, 'title') ?>

  <?= $form->field($model, 'creation_date') ?>

  <div class="form-group">
    <?= Html::submitButton('Search', ['class' => 'btn btn-primary']) ?>
    <?= Html::submitButton('Reset', ['class' => 'btn btn-default']) ?>
  </div>

 <?php ActiveForm::end(); ?>
</div>

实际上，当用户默认进入内部页面时，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标签仍然有效。我正在解释下面的页面。

dashboard.html：

sub-sub-menu Manage State

Here is my full plunkr working code。在此我需要用户点击<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 ng-class="{'active open': $state.includes('dashboard.settings.area')}"><a ui-sref="dashboard.settings.area.manageState">Settings</a></li> </ul> </div>菜单时相应的settings将保持活动状态，其他将处于非活动状态，这在我的情况下不会发生。请帮忙。

Answer 1

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

申请＆＃34;活跃＆＃34;基于＆＃34; stateName＆＃34;的类我们从＃34; $ state＆＃34;的应用程序控制器获得提供者，基于我使用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。

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

1 个答案: