删除DOM节点时进行检测

Detect when a DOM node is removed?

本文关键字：检测 DOM 节点 删除      更新时间：2023-09-26

我正在尝试编写一个指令，该指令将确保在任何给定时间只有一个元素保持活动状态。

指令：showOnlyOne描述：连接到一个dom节点，并确保一次只能看到一个附加了此指令的dom节点
用法：

<body>
<div id="one" show-only-one></div>
<section> 
<div id="two" show-only-one></div>
</section>
</body>

在这种情况下，显示的将是"两个"。。。现在想象一下，由于一个外部事件，section元素得到了一个jqLite.remove（）调用。现在我如何检测到"两个"已经被删除，然后重新激活"一个"，以便显示它？

angular.module('SWS')
.directive('swsOnlyOne', ['$log', '$interval', function($log, $interval) {
  var billies = [];
  return function(scope, elem, attrs) {
    if (billies.length > 0) {
      _.each(billies, function(b) {
        b.css('visibility', 'hidden');
      });
    }
    elem[0].addEventListener('DOMNodeRemoved', function(ev) {
      // THIS DOM EVENT WILL NEVER FIRE...
      if ('hidden' != elem.css('visibility')) {
        billies.splice(billies.indexOf(elem), 1);
        billies[billies.length].css('visibility', 'visible');
      }
    }, false);
    billies.push(elem);
  };
}]);

使用angular（最佳实践）倾听的方式是使用scope.on("$destroy", fn)https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$destroy

$scope.on("$destroy", function(event){
   // cleanup
});
// but can also be used on elements
elem.on("$destroy", function(event){
   // cleanup    
});
相关文章：