从另一个angularjs内部指令指令添加 [英] Add directive from inside another directive in angularjs

问题描述

从另一个指令里面添加指令，使得浏览器挂起。

Adding directive from inside another directive, makes the browser to hang.

什么即时试图做的是

1）改变一个自定义元素指令（如＆LT; H7＆GT;＆LT; / H7＆GT; ）编译函数中。通过这样做，浏览器挂起。

1) Alter an custom element directive (like <h7></h7>) inside the compile function. By doing this the browser hangs.

code：

<h7>TEST</h7>
    animateAppModule.directive('h7', function($compile){
        return {
            restrict:"E",
            compile:function(tElement, tAttrs, transclude){                
                tElement[0].setAttribute("ng-class", "{selected:istrue}");
                return function(scope, iElement, iAttrs){
                    //$compile(iElement)(scope);
                }
            }
        }
    })

如果我取消这行 // $编译（iElement）（范围）; ，浏览器挂起。
您可以取消注释上面说的线在这拨弄 http://jsfiddle.net/NzgZz/3/ 看到浏览器的挂。

If i uncomment this line //$compile(iElement)(scope);, the browser hangs. You can uncomment the above said line in this fiddle http://jsfiddle.net/NzgZz/3/ to see the browser hanging.

然而浏览器挂是没有的，如果发生我在 H7 指令模板属性如本小提琴。 http://jsfiddle.net/KaGRt/1/ 。

However the browser hanging is not happening if i have template property in the h7 directive, as shown in this fiddle. http://jsfiddle.net/KaGRt/1/.

在总体什么即时试图实现的是

In overall what im trying to achieve is

我要agument模板，用induvidual指令的帮助下新的功能。类似的财产以后Decorator模式。
我是一个指令，它是在指令链的编译函数中这样做，这样它会影响所有该模板的实例。

I want to agument the template, with new functionalities with help of induvidual directives. Somthing like decorator pattern. I'm doing this inside the compile function of an directive which is in the directive chain so that it affects all that instances of that template.

伪我想要实现的例子。

<xmastree addBaloon addSanta></xmastree>

1）说xmastree有一个模板 - ＆LT; D​​IV CLASS =xmastreeNG-CLASS = {闪烁：isBlinking}＆GT;＆LT; / DIV＆GT;

2）说 addBaloon 有一个模板＆LT; D​​IV CLASS =气球NG-CLASS = {膨胀：isinflated}＆GT;＆LT; / DIV＆GT;
然后， addBaloon 编译功能应该从步骤1将模板扩大到像这样

2) Say addBaloon has a template <div class="ballon" ng-class={inflated:isinflated}></div> Then, addBaloon compile function should augment the template from step1 to something like this

<div class="xmastree" ng-class={blinks:isBlinking}>
    <div ng-repeat = "ballon in ballons">
        <div class="ballon" ng-class={inflated:isinflated}></div>
    </div>
</div>

3）说 addSanta 有一个模板＆LT; D​​IV CLASS =圣诞老人NG-CLASS = {脂肪：isFat}＆GT;＆LT; / DIV＆GT;
然后， addSanta 编译功能应该从第二步模板增加至这样的事情

3) Say addSanta has a template <div class="santa" ng-class={fat:isFat}></div> Then, addSanta compile function should augment the template from step2 to something like this

<div class="xmastree" ng-class={blinks:isBlinking}>
    <div ng-repeat = "ballon in ballons">
        <div class="ballon" ng-class={inflated:isinflated}></div>
    </div>
    <div ng-repeat = "santa in santas">
        <div class="santa" ng-class={fat:isFat}></div>
    </div>
</div>

全部编译后，如果我请从第3步对衍生用合适的属性范围的模板，我应该能够得到HTML。

After all the compilation, if i run the template derived from step3 against a scope with suitable properties, i should be able to get the HTML.

推荐答案

调用 $编译指令本身的元素将导致相同的指令重新运行，其上然后重复这个过程 - 永远。在许多指令的角度源$ C ​​$ C，你可以看到，他们处理这种情况是这样的： $编译（element.contents（））（范围）; 使用 element.contents（）而不仅仅是元素（）。这意味着，在元件的内一切被编译和指令/数据绑定注册和无环路创建

Calling $compile on the element of the directive itself will cause the same directive to run again, which then repeats that process - forever. In the angular source code of many directives, you can see that they handle this situation like this: $compile(element.contents())(scope); using element.contents() rather than just element(). That means that everything inside of the element is compiled and the directives/data-bindings are registered and no loop is created.

如果您确实需要 $编译元素本身，可以完全替代原有的元素或从中取出原来的指令（删除属性，更改节点类型等）之前进行编译。

If you do need to $compile the element itself, either replace the original element entirely or remove the original directive from it (remove the attribute, change node type, etc) before compiling.

这篇关于从另一个angularjs内部指令指令添加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！