angularJS指令动态加载template

angularJS提供了自定义指令的功能,指令可以定义自己的模板控制器,这个就类似于现在框架的组件,一个指令一般对应一个模板,

   templateUrl: 'templates/exportTmp.html', 
template:'<div>............</div>'

但有时候我们想动态改变加载的指令模板

1)合理使用ng-include

html:

<div ng-switch="myVar">
  <div ng-switch-when="action">
     <div ng-include="getTemplate('action')"></div>  
  </div>
  <div ng-switch-when="view">
     <div ng-include="getTemplate('view')"></div>
  </div>
  <div ng-switch-when="edit">
     <div ng-include="getTemplate('edit')"></div>
  </div>
  <div ng-switch-default>
      <div ng-include="getTemplate('action')"></div>
  </div>
</div>

js:

   link: function ($scope, el, attr) {
           $scope.getTemplate = function(flag) {
                   if(flag=='action') {
                      template='./src/html/action.html';
                   }
                    .....
                     return template;
                     }  
               }

 

  

  

 

posted @ 2018-07-09 14:03  BuleDog  阅读(2139)  评论(0编辑  收藏  举报