首页 > 代码库 > angularJS ng-repeat中的directive 动态加载template
angularJS ng-repeat中的directive 动态加载template
需求，想实现一个html组件，传入不同的typeId，渲染不同的表单元素。
<div ng-repeat="field in vm.data"> <magic-field type="{{field.fieldTypeId}}"></magic-field> </div>如type=1，输出input元素，type=2输出textarea
也就是说我们要在directive中根据属性获得不同的template。
刚开始我的设想是利用 templateUrl 除了可以接收地址字符串，如‘tpl/demo.html‘。
也可以接收一个方法：
.directive(‘magicField‘, function(){ return { templateUrl: function(elem, attr){ if(attr.type == 1) { template = ‘tpl/mgfield/input.html‘ } if(attr.type == 2) { template = ‘tpl/mgfield/textarea.html‘ } return template; }, } })
但是此路不通。
如果属性值 type=1 是明确的可以编译成功，但是我们的directive是放到了ng-repeat中，属性值不固定，{{field.fieldTypeId}}没有编译。
打印attr，type值为未编译的 {{field.fieldTypeId}}。
原因是执行顺序问题，是先加载template内容然后执行link。
解决办法：使用ng-include
完整代码：
angular.module("app", []) .controller("DemoCtrl", [‘$scope‘, function($scope){ var vm = this; vm.data = [ { fieldTypeId: 1, title: ‘first name‘ }, { fieldTypeId: 2, title: ‘this is text area‘ } ] }]) .directive(‘magicField‘, function(){ return { template: ‘<div ng-include="getContentUrl()"></div>‘, replace: true, //transclude: true, link: function($scope, $element, $attr){ $scope.getContentUrl = function() { if($attr.type == 1) { template = ‘tpl/mgfield/input.html‘ } if($attr.type == 2) { template = ‘tpl/mgfield/textarea.html‘ } return template; } } } })
angularJS ng-repeat中的directive 动态加载template
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。