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

 

  

  

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM