从另一个指令中添加指令会使浏览器挂起。
我想做的是
1)在compile函数中更改自定义元素指令(如<h7></h7>
)。通过这样做,浏览器挂起。
码
<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)说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)说addSanta
有一个模板<div class="santa" ng-class={fat:isFat}></div>
然后,addSanta
编译函数应该将模板从步骤2扩充到类似这样的
<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。
答案 0 :(得分:3)
对指令元素本身调用$compile
将导致同一指令再次运行,然后永远重复该过程。在许多指令的角度源代码中,您可以看到它们处理这种情况:$compile(element.contents())(scope);
使用element.contents()
而不仅仅是element()
。这意味着元素内部的所有内容都已编译,并且指令/数据绑定已注册,并且不会创建循环。
如果确实需要$compile
元素本身,请在编译之前完全替换原始元素或从中删除原始指令(删除属性,更改节点类型等)。