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;

                    　}　　

               }