Menu
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
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'); }) } } }]); <body ng-controller='testCtrl'> <div testDir id='test'>I will be removed.</div> <button ng-click='removeElem('test')'>remove</button> </body> 
441
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'); }) } }; }]); I am puzzled on why the $destroy event is not triggered on remove() method.
As per the docs, the $destroy event is triggered in two cases.
- Just before a scope is destroyed
- Just before an element is removed from the DOM
The purpose being "cleanup". You can listen on the $destroy event and perform necessary cleanups before letting a scope or element be destroyed. ngIf, ngSwitch, ngRepeat and other in-built directives/methods use the $destroy event to perform cleanups.
A best example would be the ngRepeat directive
https://github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js
On line 339 you can notice the $destroy event being triggered. You can listen on the event and perform any action just before an item is removed from the list used by ngRepeat.
ngRepeat $destroy Example Plunk -- http://goo.gl/mkozCY
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
