我正在使用Mean JS开发一个项目,我正在使用他们在https://github.com/meanjs/mean提供的模板。 基本上我想做:
if (more than 1 sub-menus)
make it drop-down
else
make just a button and if that button clicked take it to state of the sub menu.
导航栏上的按钮将被定义为下拉列表。它将有2个子菜单。所有类型的用户都可以看到此主按钮。但是,一般用户只能看到下拉列表中的1个子菜单。 管理员用户将显示所有2个子菜单。我想将其定义为下拉菜单,但如果只有 1子菜单,请不要将其显示为下拉列表。当用户点击主按钮时,它将把它带到子菜单中定义的页面。
以下是header.client.view.html中的代码(这是来自模板,我没有更改它。)
<nav class="collapse navbar-collapse" collapse="!isCollapsed" role="navigation">
<ul class="nav navbar-nav" ng-if="menu.shouldRender(authentication.user);">
<li ng-repeat="item in menu.items | orderBy: 'position'" ng-if="item.shouldRender(authentication.user);" ng-switch="item.type" ng-class="{ active: $state.includes(item.state), dropdown: item.type === 'dropdown' }" class="{{item.class}}" dropdown="item.type === 'dropdown'">
<a ng-switch-when="dropdown" class="dropdown-toggle" dropdown-toggle role="button">{{::item.title}} <span class="caret"></span></a>
<ul ng-switch-when="dropdown" class="dropdown-menu">
<li ng-repeat="subitem in item.items | orderBy: 'position'" ng-if="subitem.shouldRender(authentication.user);" ui-sref-active="active">
<a ui-sref="{{subitem.state}}" ng-bind="subitem.title"></a>
</li>
</ul>
<a ng-switch-default ui-sref="{{item.state}}" ng-bind="item.title"></a>
</li>
</ul>
</nav>
以下是articles.client.config.js
中的内容// Configuring the Articles module
angular.module('articles').run(['Menus',
function(Menus) {
// Add the articles dropdown item
Menus.addMenuItem('topbar', {
title: 'Blog',
state: 'articles',
type: 'dropdown',
roles: ['*'],
position: 1
});
// Add the dropdown list item
Menus.addSubMenuItem('topbar', 'articles', {
title: 'Visit Blog',
state: 'articles.list',
roles: ['user', 'admin']
});
// Add the dropdown create item
Menus.addSubMenuItem('topbar', 'articles', {
title: 'Create Blog Post',
state: 'articles.create',
roles: ['admin']
});
}
]);