CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
Tim Mac
Tim Mac

Reputation: 1149

Why isn't $destroy triggered when I call element.remove?

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>

Upvotes: 25

Views: 24791

Answers (2)

fbynite
fbynite

Reputation: 2661

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');
      })
    }
  };
}]);

Upvotes: 25

DineshKP
DineshKP

Reputation: 364

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.

  1. Just before a scope is destroyed
  2. 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

Upvotes: 2

Related Questions