從angularjs中的另一個指令內添加指令

從另一個指令內添加指令會導致瀏覽器掛起。從angularjs中的另一個指令內添加指令

什麼即時試圖做的是

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

在總體什麼IM想要實現

我想agument模板，用induvidual指令的幫助，新的功能。像裝飾者模式的東西。我在指令鏈中的指令的編譯函數內部執行此操作，以便它影響該模板的所有實例。

我試圖實現的僞示例。

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

所有的編譯後，如果我運行從對具有合適性能的範圍第三步得到的模板，我應該能夠得到HTML。

來源

2013-03-13 rajkamal

嗨，根據你的僞示例做成plunk。也許它會有所幫助。 http://plnkr.co/edit/ye5yqqSjyKqxTbDBckl3？p = preview – Artem 2013-04-19 03:16:33

當您在當前dom元素上調用$ compile時，您正在進入infinte循環，並且您沒有模板屬性。文檔中有一行提到關於本身不運行$ compile的問題。 – 2013-07-27 21:51:34

這可以幫助你：http://www.bennadel.com/blog/2471-Delegating-Nested-Directive-Behavior-To-Parent-Directive-In-AngularJS.htm – 2013-12-06 04:37:11

調用$compile對指令本身的元素將導致相同的指令再次運行，然後重複該過程 - 永遠。在很多指令的角度源代碼中，你可以看到他們處理這種情況是這樣的：$compile(element.contents())(scope);使用element.contents()而不僅僅是element()。這意味着元素中的所有內容都被編譯，並且指令/數據綁定被註冊，並且不會創建循環。

如果您確實需要$compile元素本身，可以在編譯之前完全替換原始元素或從中刪除原始指令（刪除屬性，更改節點類型等）。

來源

2013-12-06 07:47:07 m59

從angularjs中的另一個指令內添加指令

回答

相關問題