ng-repeat 结合自定义指令 [英] ng-repeat in combination with custom directive

问题描述

我在将 ng-repeat 指令与我自己的自定义指令结合使用时遇到问题.

HTML:

<x-template-field x-ng-repeat="['title', 'body'] 中的字段"/>

JS:

angular.module('myApp', []).directive('templateField', function () {返回 {限制:'E'，编译:函数(元素，属性，transcludeFn){element.replaceWith('<input type="text"/>');}};});

参见 jSFiddle

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

根据this Stack Overflow 问题，已接受答案似乎表明这实际上在早期版本的 AngularJS (?) 中有效.

element.html('...') 不行吗?

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

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

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

为什么我不使用模板"属性?

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

我对自己的标记太挑剔了吗?

可能吧.:-)

感谢任何帮助.

解决方案

你的指令需要在 ng-repeat 之前运行，使用更高的优先级，所以当 ng-repeat> 克隆可以选择修改的元素.

来自指令用户的编译/链接分离背后的原因"部分指南解释了 ng-repeat 的工作原理.

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

所以你的代码是:

angular.module('myApp', []).directive('templateField', function () {返回 {限制:'E'，优先级:1001, <-- 优先级编译:函数(元素，属性，transcludeFn){element.replaceWith('<input type="text"/>');}};});

I'm having an issue with using the ng-repeat directive in combination with my own custom directive.

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

See jSFiddle

The problem here is that nothing is replaced. What I'm trying to accomplish is an output of 2x input fields, with the 'x-template-field' tags completely replaced in the DOM. My suspicion is that since ng-repeat is modifying the DOM at the same time, this won't work.

According to this Stack Overflow question, the accepted answer seems to indicate this has actually worked in earlier versions of AngularJS (?).

Wouldn't element.html('...') work?

While element.html('...') actually injects the generated HTML into the target element, I do not want the HTML as a child element of the template tag, but rather replace it completely in the DOM.

Why don't I wrap my template tag with another tag that has the ng-repeat directive?

Basically, for the same reason as above, I don't want my generated HTML as a child element to the repeating tag. While it would probably work decently in my application, I would still feel like I've adapted my markup to fit Angular and not the other way around.

Why am I not using the 'template' property?

I haven't found any way to alter the HTML retrieved from the 'template' / 'templateUrl' properties. The HTML I want to inject is not static, it's dynamically generated from external data.

Am I too picky with my markup?

Probably. :-)

Any help is appreciated.

解决方案

Your directive needs to run before ng-repeat by using a higher priority, so when ng-repeat clones the element it is able to pick your modifications.

The section "Reasons behind the compile/link separation" from the Directives user guide have an explanation on how ng-repeat works.

The current ng-repeat priority is 1000, so anything higher than this should do it.

So your code would be:

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

这篇关于ng-repeat 结合自定义指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！