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

ラッパー ディレクティブからの複数のディレクティブの組み込み

概要

この質問では、要素に追加のディレクティブを追加するラッパー AngularJS ディレクティブを作成する方法について説明します。に適用されます。目標は、$compile を使用して新しいディレクティブを追加してコンパイルしようとするときに無限ループを回避することです。

アプローチ

提供されるソリューションでは、次の手順が採用されています。

1. 優先度とターミナル設定:

   • priority プロパティを使用して、ラッパー ディレクティブの優先順位を高い値 (例: 1000) に設定します。これにより、同じ要素上の他のディレクティブよりも前に実行されます。
   • ターミナル プロパティを true に設定します。これにより、AngularJS はラッパー ディレクティブの実行後に他のディレクティブをコンパイルできなくなります。ラッパー ディレクティブの関数をコンパイルし、element.attr() を使用して要素に必要なディレクティブを追加し、無限ループを防ぐためにラッパー ディレクティブの属性を削除します。
   追加されたディレクティブを組み込むために要素を $compile します。

2. 例

   • 正当性
   • ターミナル: true を設定すると、ラッパー ディレクティブが最初にコンパイルされ、他のディレクティブが確実にコンパイルされます。
ラッパー ディレクティブの属性を削除すると、後続の $compile 呼び出しで再コンパイルされなくなります。

最初にラッパー ディレクティブの属性を指定せずに要素をコンパイルすると、後続の $compile 呼び出しで

<code class="javascript">angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false,
      terminal: true,
      priority: 1000,
      link: function (scope, element, attrs) {
        element.attr('tooltip', '{{dt()}}');
        element.attr('tooltip-placement', 'bottom');
        element.removeAttr("common-things"); // Remove the wrapper directive's attribute
        element.removeAttr("data-common-things"); // Also remove the same attribute with data- prefix

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

結論

このアプローチは、無限ループの可能性を回避しながら、ラッパー ディレクティブから複数のディレクティブを組み込むための堅牢なソリューションを提供します。優先順位と終端プロパティは、目的の動作を実現するために重要であり、要素を変更した後は、それ以上のコンパイルを防ぐためにラッパー ディレクティブの属性を削除することが重要です。

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