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;
                    　}　　
               }

 

　　

　　

 

转载于:https://www.cnblogs.com/evaling/p/9283526.html