在 AngularJS 中從包裝指令添加指令時如何避免無限循環？-js教程-PHP中文網

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

DDD

發布： 2024-11-03 11:03:29

原創

394 人瀏覽過

How to Avoid Infinite Loops When Adding Directives from a Wrapper Directive in AngularJS?

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

概述

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

方法

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

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

登入後複製

理由