使用 navbar 和 ui-router 动态加载外部模板

使用 AngularJS material navbar（导航栏组件）可以动态加载外部模板吗？看了 AngularJS material 官网的 Demo，觉得还是没有说清楚，导航栏的数据也是写死的。当然这对入门知识点很有用，不过对于实际项目，帮助就不大了。首先导航栏应该基于数据驱动来渲染，而且点击导航项时应该从动态加载外部模板。基于此，我们取药对 md-nav-bar 进行了扩展。

问题分析

动态渲染导航栏的数据问问哪里来？当然是来自 ui-router 的路由状态配置对象。每个状态配置对象需要配置 name（状态名）、url（链接）。如果链接是外部模板，需要设置 templateUrl 属性，链接是内部模板，则需要设置 template 属性。当然我们也可以添加自己所需的自定义属性。

代码实现

看下面配置数据：

[{
  name: 'page1',
  url: '/page1',
  templateUrl: 'template/page1.html',
  title: 'Page1'
},
{
  name: 'page2',
  url: '/page2',
  templateUrl: 'template/page2.html',
  title: 'Page2'
},
{
  name: 'page3',
  url: '/page3',
  templateUrl: 'template/page3.html',
  title: 'Page3'
}]

其中 title 属性将用于显示导航栏组件各项的标题。接下来我们来扩展这个指令。代码如下：

angular
  .module('myApp')
  /** 动态生成导航栏指令件并加载外部模板
   * @param pages {Array} navbar data provider
   */
  .directive('mdNavBarExt', function() {
    return {
      restrict: "AE",
      scope: {
        pages: '='
      },
      template: '<md-nav-bar md-selected-nav-item="selectedItem" nav-bar-aria-label="navigation links">\n' + 
      '    <md-nav-item ng-repeat="page in pages track by page.name" md-nav-sref="{{::page.name}}"' +
      '      name="{{::page.name}}">{{::page.title}}</md-nav-item>\n' +
      '    </md-nav-bar>\n',
      link: function($scope) {
        $scope.$on('$stateChangeSuccess', function(event, current) {
          $scope.selectedItem = current.name;
        });
      }
    }
  });

mdSelectedNavItem 表示当前的导航栏名，必须匹配的 <md-nav-item> 的 name 名。

注意：由于 codepen 对文件的限制，我们使用 $templateCache 前将模板缓存到一个定义模板的 JavaScript 文件中，这样就不需要通过 XHR 来加载模板了。

参考实例

访问 Codepen 查看示例代码及效果。