检测DOM节点何时被删除?
问题描述:
我正在尝试编写一个指令,以确保在任何给定时间只有其中一个元素保持活动状态。检测DOM节点何时被删除?
指令:showOnlyOne 描述:附加到一个dom节点,并确保一次只有一个连接了该指令的dom节点可见。
用法:
<body>
<div id="one" show-only-one></div>
<section>
<div id="two" show-only-one></div>
</section>
</body>
在这种情况下,一个会显示将是“二” ......现在想象的是,由于部分元素获得一个jqLite一个.remove()调用了它的外部事件。现在我该如何检测“two”已被删除,然后重新激活“one”以便显示?
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);
};
}]);
答
你的角度(最佳实践)监听的方法是用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
});
你为什么不把一个和两个在阵列中,并采用NG-变化进行跟踪,如果一个变化他们已被删除? – 2014-09-20 14:36:36
当你从描述jqLite.remove()中说当时你从DOM中删除该元素使用$广播/发射(通过所需的数据)事件和使用$添加列表器,你可以听那 – 2014-09-20 14:37:35
@PradeepMahdevu即使有了这个提示,我还不够聪明,无法理解在这种情况下如何使用ngChange完成任务。为了进一步澄清,我无法控制被调用的jqLite.remove(),所以当它发生时我不能添加我自己的事件广播。 (它发生在另一个框架中。) – JayPrime2012 2014-09-20 14:40:56