AngularJS でディレクティブを動的に追加するときに無限ループを回避するにはどうすればよいですか?

AngularJS を使用してディレクティブを動的に追加する

この記事では、単一の DOM 要素に複数のディレクティブを追加するという、AngularJS 開発における一般的な問題に対処します。目標は、datepicker、datepicker- language、ng-required などの特定の属性をターゲット要素に追加するディレクティブを作成することです。

元のアプローチ: 追加された属性の確認

最初、開発者は、必要な属性を追加する前に、それらが既に追加されているかどうかをチェックしようとしました:

<code class="javascript">if (element.attr('datepicker')) { // check
  return;
}</code>

しかし、このアプローチでは、$compile を使用するときに無限ループが発生します。追加された属性の処理を試みます。

更新されたアプローチ: 優先度とターミナルの利用

外部入力を受け取った後、開発者は、ソリューションには優先度とターミナルの両方を設定する必要があることに気づきました。カスタム ディレクティブのプロパティ。このアプローチには次のことが含まれます。

1. カスタム ディレクティブが最初にコンパイルされるように高い優先順位 (例: 1000) を設定します。
2. 他のディレクティブがコンパイルされないようにターミナルを true に設定します。

実装

優先度とターミナルを使用したディレクティブの実装例を次に示します。

<code class="javascript">angular.module('app').directive('superDirective', function ($compile) {
  return {
    restrict: 'A',
    replace: false,
    terminal: true,
    priority: 1000,
    link: function (scope, element, attrs) {
      // Remove the "superDirective" attribute to avoid looping.
      element.removeAttr("superDirective");

      // Add the necessary attributes.
      element.attr('datepicker', 'someValue');
      element.attr('datepicker-language', 'en');

      // Compile the element.
      $compile(element)(scope);
    }
  };
});</code>

このアプローチでは、次のことが可能になります。カスタム ディレクティブを使用して要素を変更し、属性を追加し、$compile を使用して、terminal:true によりスキップされたディレクティブを含むすべてのディレクティブをコンパイルします。

説明

ターミナルを true に設定すると、カスタム ディレクティブがターゲット要素でコンパイルされる唯一のディレクティブになります。これにより、冗長なコンパイルと潜在的な競合が防止されます。優先度が高いと、カスタム ディレクティブが最初にコンパイルされ、他のディレクティブがアクセスを試みる前に要素を変更できるようになります。

以上がAngularJS でディレクティブを動的に追加するときに無限ループを回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。