在 AngularJS 中從包裝指令添加指令時如何避免無限循環？

合併包裝指令中的多個指令

概述

這個問題探討瞭如何建立一個包裝器AngularJS 指令，向其元素添加其他指令被應用於.目標是在嘗試新增然後使用$compile 編譯新指令時避免無限循環。

方法

提供的解決方案採用以下步驟：

1. 優先權和終端設定：

   • 使用priority屬性將包裝器指令的優先權設定為較高的值（例如1000）。這確保它在同一元素上的其他指令之前運行。
   • 將終端屬性設為 true。這可以防止 AngularJS 在包裝指令運行後編譯任何其他指令。

2. 指令編譯：

   • 在包裝器指令的編譯函數，使用element.attr() 將所需的指令加入元素，並刪除包裝器指令的屬性以防止無限循環。
   • $編譯元素以合併新增的指令。

範例

<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>

理由

• 設定terminal: true 請確定先編譯包裝器指令，然後再編譯其他指令被繞過。
• 刪除包裝指令的屬性可以防止它在後續的 $compile 呼叫中重新編譯。
• 透過最初編譯沒有包裝指令的屬性的元素，後續的 $compile 呼叫需要小心編譯任何跳過的指令。

結論

這種方法提供了一個強大的解決方案，可以從包裝器指令中合併多個指令，同時避免出現無限循環的可能性。優先權和終止屬性對於實現所需的行為至關重要，並且在修改元素後刪除包裝器指令的屬性以防止進一步編譯也很重要。

以上是在 AngularJS 中從包裝指令添加指令時如何避免無限循環？的詳細內容。更多資訊請關注PHP中文網其他相關文章！