Question

我目前正在为我的项目使用meanjs 0.4.2，我在尝试自定义 topbar Menu 的标题时遇到问题。

为其配置文件中的每个模块填充菜单，例如：

 angular.module('articles').run(['Menus',
   function (Menus) {
     Menus.addMenuItem('topbar', {
       title: 'Articles',
       state: 'articles',
       type: 'dropdown',
       roles: ['*']
     });
   ...
]);

doc中也提到了

title - 菜单项的字符串标题。

我想知道是否有一种方法可以将此标题自定义为图标，例如bootstrap glyphicon或某种类型的我自己的图标，其中的url放在此配置中？

我真的很感谢你的帮助。

Answer 1

在menu.client.service.js（核心/客户端）中添加图标作为选项

  // Push new menu item
  service.menus[menuId].items.push({
    title: options.title || '',
    state: options.state || '',
    type: options.type || 'item',
    icon: options.icon || '',//icon option
    class: options.class,
    roles: ((options.roles === null || typeof options.roles === 'undefined') ? service.defaultRoles : options.roles),
    position: options.position || 0,
    items: [],
    shouldRender: shouldRender
  });

更新header.client.view.html（核心/客户端）

<ul class="nav navbar-nav" ng-if="vm.menu.shouldRender(vm.authentication.user);">
      <li ng-repeat="item in vm.menu.items | orderBy: 'position'" ng-if="item.shouldRender(vm.authentication.user);" ng-switch="item.type" ng-class="{ dropdown: item.type === 'dropdown' }" ui-sref-active="active" class="{{item.class}}" uib-dropdown="item.type === 'dropdown'">
        <a ng-switch-when="dropdown" class="dropdown-toggle" uib-dropdown-toggle role="button">
        <i ng-if="::item.icon" class="glyphicon glyphicon-{{::item.icon}}"></i>  {{::item.title}}&nbsp;<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(vm.authentication.user);">
            <a ui-sref="{{subitem.state}}({{subitem.params}})" ng-bind="subitem.title"></a>
          </li>
        </ul>
        <a ng-switch-default ui-sref="{{item.state}}" ng-bind="item.title"></a>
      </li>
    </ul>

在菜单服务中添加图标

  menuService.addMenuItem('topbar', {
    title: 'Articles',
    state: 'articles',
    type: 'dropdown',
    icon:'heart',
    roles: ['*']
  });

  menuService.addMenuItem('topbar', {
    title: 'Articles',
    state: 'articles',
    type: 'dropdown',
    roles: ['*']
  });

MEAN.js'topbar菜单：使用图标/图像而不是标题文本

1 个答案: