無限ループを使わずにAngularJSにディレクティブを動的に追加する方法は?

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

AngularJS で複雑な UI 要素を構築する場合、DOM 要素にディレクティブを動的に追加することが必要になる場合があります。これを実現する 1 つのアプローチは、複数のディレクティブの追加を管理する上位ディレクティブを作成することです。

条件付きコンパイルによる実装

1 つの方法は、必要なディレクティブは、追加しようとする前にすでに追加されています。このアプローチには、ディレクティブのリンク関数内で条件チェックを設定することが含まれます:

<code class="javascript">angular.module('app')
  .directive('superDirective', function ($compile, $injector) {
    return {
      restrict: 'A',
      replace: true,
      link: function (scope, element, attrs) {
        if (element.attr('datepicker')) { // Check for existing directive
          return;
        }
        element.attr('datepicker', 'someValue'); // Add directive attribute
        // Add other directive attributes
        $compile(element)(scope);
      }
    };
  });</code>

ただし、このアプローチでは、追加された属性が要素から正しく削除されない場合、無限ループが発生する可能性があります。

優先度とターミナル ディレクティブを使用したソリューション

無限ループを回避し、ディレクティブを適切に実行するには、優先度とターミナル プロパティの組み合わせを使用できます。

<code class="javascript">angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false, 
      terminal: true, // Skips compilation of subsequent directives on this element
      priority: 1000, // Executes before other directives
      link: function (scope, element, attrs) {
        // Add tooltip and tooltip placement directives
        element.attr('tooltip', '{{dt()}}');
        element.attr('tooltip-placement', 'bottom');
        // Remove the directive attribute to prevent recursive compilation
        element.removeAttr("common-things"); 
        element.removeAttr("data-common-things");
        // Compile the element again, including the added directives
        $compile(element)(scope);
      }
    };
  });</code>

設定ターミナルを true に設定すると、同じ要素に対する後続のディレクティブのコンパイルが防止されます。優先度を高くすると、カスタム ディレクティブが他のディレクティブよりも前にコンパイルされます。その後ディレクティブ属性を削除すると、無限ループが防止されます。このアプローチにより、追加されたディレクティブが干渉を引き起こすことなく正しく実行されることが保証されます。

以上が無限ループを使わずにAngularJSにディレクティブを動的に追加する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。