MEAN.js' 顶栏菜单：使用 icon/image 而不是标题文本

Question

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

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

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

doc 中还提到

title - A String title for the menu item.

我想知道是否有办法将此标题自定义为图标，例如 bootstrap 字形图标或我自己的某种类型的图标 url里面放这个配置?

非常感谢你的帮助。

Answer 1

在 menu.client.service.js 中添加图标作为选项 (core/client)

  // 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 (core/client)

<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' 顶栏菜单：使用 icon/image 而不是标题文本

MEAN.js' topbar Menu: Using icon/image instead of text for title

javascript

mean

menuitem

drop-down-menu

meanjs