为什么在调用element.remove时不触发$ destroy？

一尘不染

为什么在调用element.remove时不触发$ destroy？

angularjs

在下面的示例中，我无法弄清楚为什么未触发$ destroy事件。有人可以解释为什么不触发它，以及在什么情况下会触发它吗？

这是pl客：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>

阅读 229

2020-07-04

共1个答案

一尘不染

问题是您正在上监听$destroy事件scope，但$destroy正在上触发该事件element。

来自angular.js来源（我确定它已记录在网站上的某个地方，但我没有看）：

$destroy-AngularJS拦截所有jqLite /
jQuery的DOM破坏API，并在所有要删除的DOM节点上触发此事件。这可用于在删除DOM元素之前清除任何第三方绑定。

您的指令应为（请注意，我在和处添加了scope，element并attrs作为link参数）：另外，这是一个插件。

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

2020-07-04