当我调用element.remove时,为什么没有$destroy触发？

发布时间：2020-12-17 08:16:45 所属栏目：安全来源：网络整理

导读：我不知道为什么在以下示例中没有触发$ destroy事件。有人可以解释为什么它不被触发，在什么情况下会被触发？这是plunkr：http://plnkr.co/edit/3Fz50aNeuculWKJ22iAX?p=preview JS angular.module('testMod',[]).controller('testCtrl',function($scope){ $

我不知道为什么在以下示例中没有触发$ destroy事件。有人可以解释为什么它不被触发，在什么情况下会被触发？

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

HTML

<body ng-controller='testCtrl'>
  <div testDir id='test'>I will be removed.</div>
  <button ng-click='removeElem('test')'>remove</button>
</body>

问题是你在监听范围上的$ destroy事件，但元素上触发了$ destroy。

来自angular.js源(我确定它在网站的某个地方记录，但是我没有看)

$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.

你的指令应该是(注意我添加了scope，element和attrs作为链接参数)：另外，这里是一个plunker。

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!