2013-03-13 23 views
5

別のディレクティブの中からディレクティブを追加すると、ブラウザがハングします。angularjs内の別のディレクティブの中からディレクティブを追加します

1)は、コンパイル関数内のカスタム要素ディレクティブを(のような<h7></h7>)アルター何をしようとしているイムです。これを行うと、ブラウザがハングします。

コード:私はこのライン//$compile(iElement)(scope);のコメントを解除した場合

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

、ブラウザがハングアップします。 上記のコメント行のコメントを外すことができます。http://jsfiddle.net/NzgZz/3/ブラウザがハングしています。

ただし、このフィドルに示すように、h7指示文にテンプレートプロパティがあると、ブラウザがハングしていません。 http://jsfiddle.net/KaGRt/1/。達成しようとして何イム全体的に

は、私がinduvidualディレクティブの助けを借りて、新しい機能で、テンプレートをagumentしたい

です。デコレータパターンのようなもの。 私は、ディレクティブチェーン内のディレクティブのコンパイル機能の中で、このテンプレートのすべてのインスタンスに影響を与えるようにしています。

私が達成しようとしているものの擬似例。

<xmastree addBaloon addSanta></xmastree> 

1)xmastreeを言うには、テンプレートがある - <div class="xmastree" ng-class={blinks:isBlinking}></div>

2)addBaloonはテンプレートを持っていると言うの<div class="ballon" ng-class={inflated:isinflated}></div> 次に、この

<div class="xmastree" ng-class={blinks:isBlinking}> 
    <div ng-repeat = "ballon in ballons"> 
     <div class="ballon" ng-class={inflated:isinflated}></div> 
    </div> 
</div> 
のようなものにSTEP1からテンプレートを補強する必要があり addBaloonコンパイル機能

3)addSantaにはテンプレートがあります<div class="santa" ng-class={fat:isFat}></div> 次に、addSantaコンパイル機能は、私は適切な特性を持つ範囲に対してSTEP3から派生したテンプレートを実行した場合、私はHTMLを得ることができる必要があり、すべてのコンパイル後、この

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

のようなものにSTEP2からテンプレートを増大させる必要があります。

+1

こんにちは、あなたの擬似例によると、plunk。多分それが助けになるでしょう。 http://plnkr.co/edit/ye5yqqSjyKqxTbDBckl3?p = preview – Artem

+0

現在のdom要素で$ compileを呼び出しても、テンプレートのプロパティがないと、infinteループに入ります。ドキュメントに$ compileを実行しないという行があります。 –

+0

これはあなたを助けます:http://www.bennadel.com/blog/2471-Delegating-Nested-Directive-Behavior-To-Parent-Directive-In-AngularJS.htm –

答えて

3

ディレクティブ自体の要素で$compileを呼び出すと、同じディレクティブが再度実行され、そのプロセスが永久に繰り返されます。多くのディレクティブの角度ソースコードでは、$compile(element.contents())(scope);element()ではなくelement.contents()を使用して処理していることがわかります。つまり、要素内のすべてがコンパイルされ、ディレクティブ/データバインディングが登録され、ループは作成されません。

$compile要素が必要な場合は、元の要素を完全に置き換えるか、コンパイルする前に元のディレクティブを削除します(属性を削除し、ノードの種類を変更するなど)。

関連する問題