如何在 AngularJS 中加入父指令中的指令而不出現無限迴圈？

在AngularJS 中加入來自父指令的指令

在AngularJS 中，可能需要在已經存在的元素中加入其他指令配備父指令。雖然 $compile 服務提供了實現此目的的方法，但避免無限循環至關重要。

為了防止此問題，建議檢查所需的屬性是否已附加到元素。然而，當使用 $compile 更新元素時，指令不會被初始化。

這種方法適合嗎？

上述方法通常是有效的；但是，可能需要進行調整以確保功能正常。

替代方法

替代解決方案涉及利用優先級屬性來對單一元素上的指令應用進行排序。具有較高優先權值的指令會先執行。透過為父指令分配高優先權，可以確保其初始化先於子指令。

調整指令

根據討論，以下內容該指令的修訂版本提供了一個可行的解決方案。

<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中文網其他相關文章！