1

我正在尝试menu and sub-menu使用ui.bootstrapangular.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活动类中。

4

0 回答 0