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

【问题标题】：Add directive from inside another directive in angularjs从angularjs中的另一个指令中添加指令
【发布时间】：2013-03-13 07:15:55
【问题描述】：

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

我想做的是

1) 在编译函数中更改自定义元素指令（如<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 compile 函数应该将模板从 step1 扩充为类似的东西

<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 compile 函数应该将模板从 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。

【问题讨论】：

嗨，根据您的伪示例制作了 plunk。也许会有所帮助。 plnkr.co/edit/ye5yqqSjyKqxTbDBckl3?p=preview
当您在当前 dom 元素上调用 $compile 并且没有模板属性时，您将进入无限循环。文档中有一行说不要在自身上运行 $compile。
这个可以帮你：bennadel.com/blog/…
我的回答有用吗？如果是这样，你会接受吗？如果没有，什么不起作用？

标签： angularjs

【解决方案1】：

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

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

【讨论】：