使用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表示当前的导航栏名, 安必须匹配的的name名。

注意由于codepen对文件的限制,我们使用$templateCache前将模板缓存到一个定义模板的JavaScript文件中,这样就不需要通过XHR来加载模板了。最终效果:https://codepen.io/riafan/pen/EExgGY

发表评论

电子邮件地址不会被公开。 必填项已用*标注