angularjs - ng-repeat 结合自定义指令

Question

我在将 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" />');
            }
        };
    });

见 jSFiddle

这里的问题是没有任何东西被替换。我想要完成的是 2x 输入字段的输出，在 DOM 中完全替换了“x-template-field”标签。我的怀疑是，由于 ng-repeat 正在同时修改 DOM，所以这是行不通的。

根据 this堆栈溢出问题，接受的答案似乎表明这实际上在早期版本的 AngularJS(？)中有效。

不会 element.html('...') 工作吗？

虽然 element.html('...') 实际上将生成的 HTML 注入(inject)到目标元素中，但我不希望 HTML 作为模板标签的子元素，而是在 DOM 中完全替换它。

为什么不用另一个具有 ng-repeat 指令的标签来包装我的模板标签？

基本上，出于与上述相同的原因，我不希望我生成的 HTML 作为重复标记的子元素。虽然它可能在我的应用程序中工作得很好，但我仍然觉得我已经调整了我的标记以适应 Angular，而不是相反。

为什么我不使用"template"属性？

我还没有找到任何方法来更改从"template"/“模板Url”属性中检索到的 HTML。我要注入(inject)的 HTML 不是静态的，它是从外部数据动态生成的。

我对我的标记太挑剔了吗？

大概。 :-)

任何帮助表示赞赏。

Answer 1

您的指令需要在 ng-repeat 之前运行通过使用更高的优先级，所以当 ng-repeat克隆它能够选择您的修改的元素。

the Directives user guide 中的“编译/链接分离背后的原因”部分解释一下 ng-repeat 的工作原理。

current ng-repeat priority是 1000，所以任何高于此的都应该这样做。

所以你的代码是:

angular.module('myApp', [])
    .directive('templateField', function () {
        return {
            restrict: 'E',
            priority: 1001, <-- PRIORITY
            compile: function(element, attrs, transcludeFn) {
                element.replaceWith('<input type="text" />');
            }
        };
});