AngularJs - 删除/销毁元素后清理

Question

方案

我有一个指令，它将div中的目标元素包装起来，以包含使用该指令创建的其他UI元素，我的问题是，当我尝试解压源元素时，它将被解除/删除DOM，它会导致浏览器进入无限循环。

样品

这是一个重现问题的示例代码：

angular.module('myDirective', []).directive('myDirective', function() {
  return {
    link: function(scope, element, attrs) {
      function wrapElement() {
        element.wrap('<div class="my-directive-container"></div>');
      }

      function unwrapElement() {
        element.parent().replaceWith(element);
      }

      // Listen for the destroy event on the element
      element.on('$destroy', unwrapElement);

      wrapElement();
    }
  };
});

问题

我的问题是，在删除源元素后，如何解包或删除容器元素？

小提琴

这是一个有效的fiddle，当你尝试删除该元素时，不会发生任何事情，因为超出最大调用堆栈大小的错误将显示在控制台中。

Answer 1

如果您可以升级（显然至少为1.2.6），请使用one代替on，否则请手动取消注册处理程序：

function unwrapElement() {
    element.off('$destroy', unwrapElement);
    // this could also be just element.parent().remove() instead
    element.parent().replaceWith(element);
}