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

AngularJS の親ディレクティブからディレクティブを追加する

AngularJS では、既に存在する要素に追加のディレクティブを追加する必要が生じる場合があります。親ディレクティブが装備されています。 $compile サービスはこれを実現する手段を提供しますが、無限ループを避けることが重要です。

この問題を回避するには、必要な属性がすでに要素に追加されているかどうかを調べることをお勧めします。ただし、$compile を使用して要素を更新する場合、ディレクティブは初期化されません。

このアプローチは適切ですか?

前述のアプローチは一般に有効です。ただし、適切な機能を確保するには調整が必要な場合があります。

代替方法

代替ソリューションには、priority プロパティを活用して、単一要素に対するディレクティブの適用を順序付けることが含まれます。優先順位の値が高いディレクティブが最初に実行されます。親ディレクティブに高い優先順位を割り当てることで、親ディレクティブの初期化が子ディレクティブの初期化よりも確実に優先されます。

ディレクティブの微調整

議論に基づいて、次のようになります。ディレクティブの改訂版は、実行可能なソリューションを提供します。

<code class="javascript">angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false,
      terminal: true, // Prevent subsequent directives from executing
      priority: 1000, // Assign a high priority for early execution
      compile: function compile(element, attrs) {
        // Add additional attributes
        element.attr('tooltip', '{{dt()}}');
        element.attr('tooltip-placement', 'bottom');

        // Remove the parent directive attribute to avoid looping
        element.removeAttr('common-things');
        element.removeAttr('data-common-things');

        return {
          pre: function preLink(scope, iElement, iAttrs, controller) { },
          post: function postLink(scope, iElement, iAttrs, controller) {
            $compile(iElement)(scope);
          },
        };
      },
    };
  });</code>

この更新されたディレクティブは、無限ループを防止しながら、必要な属性を効果的に追加します。端末プロパティを利用して後続のディレクティブの実行を停止し、子ディレクティブが初期化された後にディレクティブが適用されるようにします。

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