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