从angularjs中的另一个指令中添加指令

Question

从另一个指令中添加指令会使浏览器挂起.

我想做的是

1)<h7></h7>在compile函数中更改自定义元素指令(如).通过这样做,浏览器挂起.

码:

<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);
                }
            }
        }
    })

如果我取消注释此行//$compile(iElement)(scope);,浏览器将挂起.您可以在这个小提琴http://jsfiddle.net/NzgZz/3/中取消注释上述行,以查看浏览器挂起.

但是,如果我在h7指令中有模板属性,则浏览器挂起不会发生,如此小提琴所示.http://jsfiddle.net/KaGRt/1/.

总的来说,我想要实现的是

我想在模板指令的帮助下,使用新的功能来修改模板.像装饰图案一样的东西.我在指令链的指令的编译函数中执行此操作,以便它影响该模板的所有实例.

我想要实现的一个例子.

<xmastree addBaloon addSanta></xmastree>

1)说xmastree有一个模板 - <div class="xmastree" ng-class={blinks:isBlinking}></div>

2)Say addBaloon有一个模板<div class="ballon" ng-class={inflated:isinflated}></div> 然后,addBaloon编译函数应该将模板从步骤1扩充到这样的东西

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

3)Say addSanta有一个模板<div class="santa" ng-class={fat:isFat}></div> 然后,addSanta编译函数应该将模板从step2增加到这样的东西

<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>

在所有编译之后,如果我针对具有合适属性的作用域运行从step3派生的模板,我应该能够获得HTML.

Answer 1

调用$compile指令本身的元素将导致相同的指令再次运行，然后永远重复该过程。在许多指令的 Angular 源代码中，您可以看到它们是这样处理这种情况的：$compile(element.contents())(scope);使用element.contents()而不是仅仅element(). 这意味着元素内部的所有内容都会被编译，指令/数据绑定都会被注册，并且不会创建循环。

如果您确实需要$compile元素本身，请在编译之前完全替换原始元素或从中删除原始指令（删除属性、更改节点类型等）。