angularjs：为什么当我打电话element.remove不是$销毁触发？ [英] angularjs: why isn't $destroy triggered when I call element.remove?
问题描述
我不明白，为什么$破坏事件不会在下面的例子中触发。有人可以解释为什么它没有被触发，以及在什么情况下会被触发？
这里的plunkr：<一href=\"http://plnkr.co/edit/3Fz50aNeuculWKJ22iAX?p=$p$pview\">http://plnkr.co/edit/3Fz50aNeuculWKJ22iAX?p=$p$pview
JS
angular.module（'testMod'，[]）
.controller（'testCtrl'，函数（$范围）{
$ scope.removeElem =功能（ID）{
VAR ELEM =的document.getElementById（id）的;
angular.element（ELEM）一个.remove（）;
}
}）指令（TESTDIR'，[功能（）{
返回{
适用范围：真，
链接：功能（范围）{
的console.log（'的指令）;
（范围。在$（'$破坏'，功能）{
警报（'毁'）;
}）
}
}
}]）;
HTML
＆LT;机身NG控制器='testCtrl'＆GT;
＆LT; DIV ID TESTDIR ='测试'I标记将被删除＆LT; / DIV＆GT;
＆LT;按钮NG点击='removeElem（测试），'＆GT;清除＆LT; /按钮＆GT;
＆LT; /身体GT;
问题是你的听音 $摧毁事件的范围，但 $摧毁正由元素触发。
从 angular.js 源（我敢肯定，这documentated网站上的某个地方，但我没有看）：
$摧毁 - AngularJS拦截所有jqLite / jQuery的DOM API的破坏
和火灾所有DOM节点上这个事件被删除。这可以用来清洁
的任何第三方绑定的DOM元素之前被删除。
您的指令应为（注意，我说范围，元素和 ATTRS 为链接参数）：另外，这里是一个的 plunker 。
指令（'TESTDIR'，[功能（）{
返回{
适用范围：真，
链接：功能（范围，元素，ATTRS）{
的console.log（'的指令）;
element.on（'$破坏'，函数（）{
警报（'毁'）;
}）
}
};
}]）;
I can't figure out why the $destroy event is not triggered in the following example. Can someone explain why it is not triggered, and in what scenarios it will be triggered?
Here's the plunkr: http://plnkr.co/edit/3Fz50aNeuculWKJ22iAX?p=preview
JS
angular.module('testMod', [])
.controller('testCtrl', function($scope){
$scope.removeElem = function(id) {
var elem = document.getElementById(id);
angular.element(elem).remove();
}
}).directive('testDir',[function() {
return {
scope:true,
link: function(scope) {
console.log('in directive');
scope.$on('$destroy', function(){
alert('destroyed');
})
}
}
}]);
HTML
<body ng-controller='testCtrl'>
<div testDir id='test'>I will be removed.</div>
<button ng-click='removeElem('test')'>remove</button>
</body>
The problem is your listening for the $destroy event on the scope, but $destroy is being triggered on the element.
From angular.js source (I'm sure it's documentated on the website somewhere, but I didn't look):
$destroy - AngularJS intercepts all jqLite/jQuery's DOM destruction apis
and fires this event on all DOM nodes being removed. This can be used to clean
up any 3rd party bindings to the DOM element before it is removed.
Your directive should be (note that I added scope,element, and attrs as link arguments): Also, here is a plunker.
directive('testDir',[function() {
return {
scope:true,
link: function(scope,element,attrs) {
console.log('in directive');
element.on('$destroy', function(){
alert('destroyed');
})
}
};
}]);
这篇关于angularjs：为什么当我打电话element.remove不是$销毁触发？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
