如何在 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中文网其他相关文章！