MEAN.js顶部导航栏菜单：用图标/图片替代文本标题

我之前在MEAN.js项目里也遇到过一模一样的需求，默认的Menus.addMenuItem确实只支持纯文本标题，但通过调整菜单配置或修改模板，完全可以实现你要的图标效果，下面给你两种可行的方案：

方案1：直接在title中传入HTML（快速实现） #

MEAN.js的顶部导航模板默认会把item.title当作纯文本渲染，所以我们需要让它支持HTML，同时确保HTML内容被Angular信任。

步骤1：修改菜单配置 #

在你的模块run块中，引入$sce服务，把包含图标的HTML字符串标记为可信HTML：

angular.module('articles').run(['Menus', '$sce', function (Menus, $sce) {
  // Bootstrap Glyphicon示例
  Menus.addMenuItem('topbar', {
    title: $sce.trustAsHtml('<i class="glyphicon glyphicon-file"></i> Articles'),
    state: 'articles',
    type: 'dropdown',
    roles: ['*']
  });

  // 自定义图片图标示例
  // Menus.addMenuItem('topbar', {
  //   title: $sce.trustAsHtml('<img src="/assets/images/articles-icon.png" alt="Articles" class="menu-icon"> Articles'),
  //   state: 'articles',
  //   type: 'dropdown',
  //   roles: ['*']
  // });
}]);

步骤2：修改顶部导航模板 #

找到MEAN.js核心模块的头部模板（路径一般是modules/core/client/views/header.client.view.html），找到渲染菜单项标题的地方，把原来的{{item.title}}替换为ng-bind-html指令来渲染HTML：

<!-- 针对下拉菜单的示例 -->
<a href="#" class="dropdown-toggle" ng-click="toggleDropdown($event, item)" ng-if="item.type === 'dropdown'">
  <span ng-bind-html="item.title"></span>
  <b class="caret"></b>
</a>

<!-- 针对普通单链接菜单的示例 -->
<a ui-sref="{{item.state}}" ui-sref-active="active" ng-if="item.type !== 'dropdown'">
  <span ng-bind-html="item.title"></span>
</a>

方案2：添加独立的icon属性（更优雅的规范写法） #

如果不想把HTML和标题文本混在一起，可以给菜单项添加一个自定义的icon属性，然后修改模板来判断并渲染图标。

步骤1：修改菜单配置 #

在addMenuItem时新增icon属性，区分Glyphicon和自定义图片：

angular.module('articles').run(['Menus', function (Menus) {
  // Bootstrap Glyphicon配置
  Menus.addMenuItem('topbar', {
    title: 'Articles',
    state: 'articles',
    type: 'dropdown',
    roles: ['*'],
    icon: 'glyphicon glyphicon-file' // 直接传入Glyphicon的class
  });

  // 自定义图片图标配置
  // Menus.addMenuItem('topbar', {
  //   title: 'Articles',
  //   state: 'articles',
  //   type: 'dropdown',
  //   roles: ['*'],
  //   icon: '/assets/images/articles-icon.png' // 传入图片路径
  // });
}]);

步骤2：修改顶部导航模板 #

在模板中根据icon属性的类型，分别渲染Glyphicon或图片：

<!-- 下拉菜单项示例 -->
<li ng-repeat="item in menu.items" class="dropdown" ng-class="{open: isOpen(item)}">
  <a href="#" class="dropdown-toggle" ng-click="toggleDropdown($event, item)" ng-if="item.type === 'dropdown'">
    <!-- 渲染Bootstrap Glyphicon -->
    <i ng-if="item.icon && item.icon.includes('glyphicon')" class="{{item.icon}} mr-2"></i>
    <!-- 渲染自定义图片图标 -->
    <img ng-if="item.icon && !item.icon.includes('glyphicon')" 
         src="{{item.icon}}" 
         alt="{{item.title}}" 
         class="menu-icon mr-2">
    {{item.title}}
    <b class="caret"></b>
  </a>
</li>

<!-- 普通单链接菜单项示例 -->
<li ng-repeat="item in menu.items" ng-if="item.type !== 'dropdown'">
  <a ui-sref="{{item.state}}" ui-sref-active="active">
    <i ng-if="item.icon && item.icon.includes('glyphicon')" class="{{item.icon}} mr-2"></i>
    <img ng-if="item.icon && !item.icon.includes('glyphicon')" 
         src="{{item.icon}}" 
         alt="{{item.title}}" 
         class="menu-icon mr-2">
    {{item.title}}
  </a>
</li>

这里的mr-2是Bootstrap的边距类，用来给图标和标题之间加间距，你可以根据自己的样式需求调整。

注意事项 #

1. MEAN.js 0.4.2的Menus服务支持自定义属性，所以你添加的icon属性会被正常保存并传递到模板中。
2. 如果使用自定义图片，要确保图片路径正确——如果图片放在public/assets/images目录下，路径就是/assets/images/xxx.png。
3. 用$sce.trustAsHtml时，确保传入的HTML是安全的，避免XSS风险。

内容的提问来源于stack exchange，提问作者Lệ Gia Lễ