18

我在将 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 Stack Overflow question，接受的答案似乎表明这实际上在早期版本的AngularJS（？）中有效。

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

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

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

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

为什么我不使用“模板”属性？

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

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

大概。:-)

任何帮助表示赞赏。

4

2 回答 2

16

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

指令用户指南中的“编译/链接分离背后的原因”部分解释了 ng-repeat 的工作原理。

当前的优先ng-repeat级是 1000，所以任何高于此的都应该这样做。

所以你的代码是：

angular.module('myApp', [])
    .directive('templateField', function () {
        return {
            restrict: 'E',
            priority: 1001, <-- PRIORITY
            compile: function(element, attrs, transcludeFn) {
                element.replaceWith('<input type="text" />');
            }
        };
});
于 2013-04-12T03:46:59.897 回答
3

把你ng-repeat的模板。您可以修改元素的属性，并相应地在指令中确定是否需要 ng-repeat，或者在指令编译中使用哪些数据

HTML（属性）：

<div ng-app="myApp" template-field></div>

JS：

angular.module('myApp', [])
    .directive('templateField', function () {
        return {          
            restrict: 'A',
            template:'<input type="text" value="{{field}" ng-repeat="field in [\'title\',\'body\']" />'            
        };
    });

演示：http: //jsfiddle.net/GDfxd/3/

也可用作元素：

HTML（元素）：

<div ng-app="myApp" >
    <template-field/>
</div>

JS

angular.module('myApp', [])
    .directive('templateField', function () {
        return {          
            restrict: 'E',
            replace:true,
            template:'<input type="text" value="{{field}}" ng-repeat="field in [\'title\',\'body\']" />'

        };
    });

演示：http: //jsfiddle.net/GDfxd/3/

于 2013-03-11T17:21:32.023 回答