web-dev-qa-db-ja.com

ng-repeatディレクティブの「優先度」は何ですか?

角度のドキュメントは言う:-

DOMのコンパイルは、$ compile()メソッドの呼び出しによって実行されます。メソッドはDOMを走査し、ディレクティブと一致します。一致するものが見つかった場合、指定されたDOM要素に関連付けられたディレクティブのリストに追加されます。特定のDOM要素のすべてのディレクティブが識別されると、それらはpriorityおよびそれらのcompile( )関数が実行されます。

dynamic id and custom directive のような特定のユースケースでは、ng-repeatディレクティブはカスタムディレクティブよりも優先度が低いと思います。 angularディレクティブの優先度をいじくり回して、一方の実行を他方より先に選択できますか?

38
Sangram Singh

はい、ディレクティブの優先度を設定できます。 ng-repeatの優先度は 10 で、実際にはカスタムディレクティブよりも高い(デフォルトの優先度は0)。この番号は、それに関連してディレクティブに独自の優先順位を設定する方法のガイドとして使用できます。

angular.module('x').directive('customPriority', function() {
    return {
        priority: 1001,
        restrict: 'E',
        compile: function () {
            return function () {...}
        }
    }
})

priority-1つのDOM要素に複数のディレクティブが定義されている場合、ディレクティブが適用される順序を指定する必要がある場合があります。優先順位は、コンパイル関数が呼び出される前にディレクティブをソートするために使用されます。優先度は数値として定義されます。数値の優先度が高いディレクティブが最初にコンパイルされます。同じ優先順位を持つディレクティブの順序は未定義です。デフォルトの優先度は0です。

55
Cuong Vo

AngularJSは、要素に関連付けられているすべてのディレクティブを見つけて処理します。このオプションは、angularに優先度でディレクティブをソートし、より高い優先度を持つディレクティブが他の前にコンパイルまたはリンクされるように指示します。このオプションを持つ理由は、出力の条件チェックを実行できるためですコンパイル済みの以前のディレクティブ。

以下の例では、最初にボタンを追加し、classを現在のボタンに追加した後にのみ:

デモ Fiddle

App.directive('btn', function() {
  return {
    restrict: 'A',
    priority: 1,
    link: function(scope, element, attrs) {
      element.addClass('btn');
    }
  };
});

App.directive('primary', function() {
  return {
    restrict: 'A',
    priority: 0,
    link: function(scope, element, attrs) {
      if (element.hasClass('btn')) {
        element.addClass('btn-primary');
      }
    }
  };
});
11
Maxim Shoustin