NG-重复联合定制指令 [英] ng-repeat in combination with custom directive

问题描述

我在使用了NG-重复指令，结合我自己的自定义指令的问题。

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

请参阅这个JS小提琴： http://jsfiddle.net/GDfxd/

See this JS Fiddle: http://jsfiddle.net/GDfxd/

这里的问题是，没有被替换。我试图做到的是2个输入字段的输出，用'X模板场标签中的DOM完全取代。我怀疑是因为NG-重复在同一时间修改DOM，这是不行的。

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.

据<一个href=\"http://stackoverflow.com/questions/10629238/angularjs-customizing-the-template-within-a-directive%20this\">this堆栈溢出的问题，接受的答案似乎表明这实际上已经在早期版本的AngularJS工作（？）。

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

虽然element.html（'...'）实际上注入生成的HTML到目标元素，我不希望HTML作为模板标记的子元素，而是在DOM完全取代它。

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.

基本上与上述同样的原因，我不希望我生成的HTML作为一个子元素的重复标记。虽然它可能会在我的应用程序体面的工作，我仍然觉得我已经适应我的标记，以适应角度，而不是周围的其他方法。

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.

我还没有找到任何办法改变从模板/templateUrl的属性检索到的HTML。我想注入HTML不是一成不变的，它是动态地从外部数据生成的。

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.

大概。 ： - ）

任何帮助是AP preciated。

Any help is appreciated.

推荐答案

您的指令之前需要运行NG-重复通过使用更高的优先级，因此当 NG-重复克隆元素是能挑到您的修改。

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.

一节的的编译/链接的分离背后的原因的从的指示用户指南对NG-重复工作原理的解释。

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

NG-重复优先是1000，所以任何高于这个应该这样做。

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

所以你的code将是：

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-重复联合定制指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！