web-dev-qa-db-fra.com

Pourquoi $ destroy n'est-il pas déclenché lorsque j'appelle element.remove?

Je ne peux pas comprendre pourquoi l'événement $ destroy n'est pas déclenché dans l'exemple suivant. Quelqu'un peut-il expliquer pourquoi il n'est pas déclenché et dans quels scénarios il le sera?

Voici le 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>
angularjsangularjs-directiveangularjs-scope
24
Tim Mac

Le problème est que vous écoutez le $destroy événement sur le scope, mais $destroy est déclenché sur le element.

De la source angular.js (je suis sûr que c'est documenté quelque part sur le site Web, mais je n'ai pas regardé):

$destroy - AngularJS intercepte tous les apis de destruction DOM de jqLite/jQuery et déclenche cet événement sur tous les nœuds DOM en cours de suppression. Cela peut être utilisé pour nettoyer toutes les liaisons tierces à l'élément DOM avant sa suppression.

Votre directive devrait être (notez que j'ai ajouté scope, element et attrs comme link arguments): De plus, voici un plunker .

directive('testDir',[function() {
  return {
    scope:true,
    link: function(scope,element,attrs) {
      console.log('in directive');
      element.on('$destroy', function(){
        alert('destroyed');
      })
    }
  };
}]);
24
fbynite

Je suis perplexe sur la raison pour laquelle l'événement $ destroy n'est pas déclenché sur la méthode remove ().

Selon les documents, l'événement $ destroy est déclenché dans deux cas.

  1. Juste avant la destruction d'une lunette
  2. Juste avant la suppression d'un élément du DOM

Le but étant le "nettoyage". Vous pouvez écouter l'événement $ destroy et effectuer les nettoyages nécessaires avant de laisser une étendue ou un élément être détruit. ngIf, ngSwitch, ngRepeat et d'autres directives/méthodes intégrées utilisent l'événement $ destroy pour effectuer des nettoyages.

Un meilleur exemple serait la directive ngRepeat

https://github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js

À la ligne 339, vous pouvez remarquer que l'événement $ destroy est déclenché. Vous pouvez écouter l'événement et effectuer n'importe quelle action juste avant qu'un élément ne soit supprimé de la liste utilisée par ngRepeat.

ngRepeat $ destroy Exemple Plunk - http://goo.gl/mkozCY

1
Dinesh