无法使用 Angular.js 激活菜单栏
Could not active the menu bar using Angular.js
我遇到了一个问题。我无法使用 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
将保持活动状态,而其他人将处于非活动状态,这在我的情况下不会发生。请帮忙
以下面的例子为例,我是如何激活子菜单及其菜单的。我想这可能对您有所帮助。
基于"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 激活右侧菜单栏。我有一些菜单、子菜单和子子菜单,但根据要求我无法激活它们。我在下面解释我的代码。
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
将保持活动状态,而其他人将处于非活动状态,这在我的情况下不会发生。请帮忙
以下面的例子为例,我是如何激活子菜单及其菜单的。我想这可能对您有所帮助。
基于"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。