5

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

私がやろうとしているのは

<h7></h7>1）コンパイル関数内のカスタム要素ディレクティブ（のような）を変更します。これを行うと、ブラウザがハングします。

コード：

<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を取得できるはずです。

4

1 に答える 1

3

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

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

于 2013-12-06T07:47:07.187 に答える