1つのDOM要素に複数のディレクティブがあり、それらが適用される順序が重要な場合は、priority
プロパティを使用してアプリケーションを順序付けることができます。大きい数が最初に実行されます。指定しない場合、デフォルトの優先度は0です。
編集:議論の後、これが完全な実用的な解決策です。重要なのは、属性を削除することでした:(またelement.removeAttr("common-things");
、element.removeAttr("data-common-things");
ユーザーdata-common-things
がHTMLで指定した場合)
angular.module('app')
.directive('commonThings', function ($compile) {
return {
restrict: 'A',
replace: false,
terminal: true, //this setting is important, see explanation below
priority: 1000, //this setting is important, see explanation below
compile: function compile(element, attrs) {
element.attr('tooltip', '{{dt()}}');
element.attr('tooltip-placement', 'bottom');
element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html
return {
pre: function preLink(scope, iElement, iAttrs, controller) { },
post: function postLink(scope, iElement, iAttrs, controller) {
$compile(iElement)(scope);
}
};
}
};
});
ワーキングプランカーはhttp://plnkr.co/edit/Q13bUt?p=previewで入手できます。
または:
angular.module('app')
.directive('commonThings', function ($compile) {
return {
restrict: 'A',
replace: false,
terminal: true,
priority: 1000,
link: function link(scope,element, attrs) {
element.attr('tooltip', '{{dt()}}');
element.attr('tooltip-placement', 'bottom');
element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html
$compile(element)(scope);
}
};
});
デモ
設定terminal: true
しなければならない理由とpriority: 1000
(高い数値):
DOMの準備ができると、angularはDOMをpriority
調べて登録されているすべてのディレクティブを識別し、これらのディレクティブが同じ要素にあるかどうかに基づいてディレクティブを1つずつコンパイルします。カスタムディレクティブの優先度を高い値に設定して、最初にコンパイルterminal: true
されるようにします。を使用すると、このディレクティブのコンパイル後に他のディレクティブがスキップされます。
カスタムディレクティブがコンパイルされると、ディレクティブを追加してそれを削除することで要素を変更し、$ compileサービスを使用してすべてのディレクティブ(スキップされたものを含む)をコンパイルします。
terminal:true
andを設定しない場合priority: 1000
、一部のディレクティブがカスタムディレクティブの前にコンパイルされる可能性があります。そして、カスタムディレクティブが$ compileを使用して要素をコンパイルするとき=>コンパイル済みのディレクティブを再度コンパイルします。特に、カスタムディレクティブの前にコンパイルされたディレクティブが既にDOMを変換している場合は、予期しない動作が発生します。
優先順位とターミナルの詳細については、ディレクティブの「ターミナル」を理解する方法を確認してください。
テンプレートも変更するディレクティブの例はng-repeat
(priority = 1000)ng-repeat
です。コンパイル時ng-repeat
に、他のディレクティブが適用される前にテンプレート要素のコピーを作成します。
@Izhakiのコメントのおかげで、ここにngRepeat
ソースコードへの参照があります:https : //github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js
RangeError: Maximum call stack size exceeded
ます。