我正在尝试menu and sub-menu
使用ui.bootstrap
angular.js 显示,但是在选择子菜单时,相应的父菜单没有获得活动类。
仪表板.html:
<li ng-class="{'active open': $state.includes('dashboard.settings.area')}"><a ui-sref="dashboard.settings.area.manageState">Settings</a></li>
这是我的顶级父菜单意味着单击设置父菜单时,sub-menu
将打开下面的菜单。
设置.html:
<div>
<uib-tabset>
<uib-tab ui-sref="dashboard.settings.area" active="set[1]">
<uib-tab-heading>Manage Area</uib-tab-heading>
</uib-tab>
</uib-tabset>
<div ui-view></div>
</div>
设置控制器.js:
var dept=angular.module('easyride');
dept.controller('settingsController',function($scope,$state){
$scope.set = {
1: ($state.current.name === 'dashboard.settings.area')
};
});
然后在此之下sub-menu
还有两个sub-sub-menu
现在给出,如下所示。
区域.html:
<div>
<uib-tabset>
<uib-tab ui-sref="dashboard.settings.area.manageState" active="area[1]">
<uib-tab-heading>Manage State</uib-tab-heading>
</uib-tab>
<uib-tab ui-sref="dashboard.settings.area.manageCity" active="area[2]">
<uib-tab-heading>Manage City</uib-tab-heading>
</uib-tab>
</uib-tabset>
<div ui-view></div>
</div>
区域控制器.js:
var dept=angular.module('easyride');
dept.controller('areaController',function($scope,$state){
$scope.area = {
1: ($state.current.name === 'dashboard.settings.area.manageState'),
2: ($state.current.name === 'dashboard.settings.area.manageCity')
};
});
当用户单击settings
parent menu
它时,将打开sub-menu->Manage Area
该子菜单,并且在此子菜单下sub-sub-menu->Manage State
将打开并且总链将保持活动状态。意味着settings,Manage Area,Manage State
三个选项卡将保持活动状态,但在我的情况下仅Manage State
保持活动状态,但其父菜单未突出显示,因此在这里我需要将多个条件放在uib-tab
活动类中。