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

angularjs angularjs-directive angularjs-scope

24,174

Solution 1

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

Solution 2

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

24,174

Tim Mac

Passionate about technology, programming and learning new things in those areas.

Updated on July 09, 2022

Comments

Tim Mac almost 2 years

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>

ryeballar almost 10 years

doing this destroys the controller's $scope and not the isolated scope of the element being removed.
Tim Mac almost 10 years

makes sense, should have realized that myself :)
Tim Mac almost 10 years

As a follow up, should I manually destroy the scope of that directive in the element's $destroy event? Will that be taken care of?
WebWanderer over 8 years

@TimMac How would you suggest I go about manually destroying the scope here?
Tim Mac over 8 years

@WebWanderer you can call the $destroy() method on the scope, which I've been doing on both the element destroy event and the scope destroy event.
WebWanderer over 8 years

@TimMac That's what I thought. Thanks for the reassurance.