使用ng-repeat指令与我自己的自定义指令相结合,我遇到了一个问题。
HTML:
<div ng-app="myApp"> <x-template-field x-ng-repeat="field in ['title','body']" /> </div>
JS:
angular.module('myApp',[]) .directive('templateField',function () { return { restrict: 'E',compile: function(element,attrs,transcludeFn) { element.replaceWith('<input type="text" />'); } }; });
看到这个JS小提琴:http://jsfiddle.net/GDfxd/
这里的问题是没有任何替代。我想要完成的是2x输入字段的输出,“x-template-field”标签在DOM中完全替换。我的怀疑是,由于ng-repeat在同一时间修改DOM,所以这不会奏效。
根据this堆栈溢出问题,接受的答案似乎表明这实际上在早期版本的AngularJS(?)中有效。
element.html(‘…’)不会工作吗?
虽然element.html(‘…’)实际上将生成的HTML注入到目标元素中,但我不希望HTML作为模板标签的子元素,而是在DOM中完全替换它。
为什么不用包含ng-repeat指令的另一个标签包装我的模板标签?
基于与上述相同的原因,我不希望生成的HTML作为重复标签的子元素。虽然它可能在我的应用程序中正式工作,但我仍然觉得我已经调整了我的标记,以适应Angular,而不是相反。
为什么我不使用“模板”属性?
我没有找到任何方法来更改从“template”/“templateUrl”属性中检索的HTML。我想注入的HTML不是静态的,它是从外部数据动态生成的。
我也很挑剔我的标记吗?
大概。