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

前端之家收集整理的这篇文章主要介绍了当我调用element.remove时,为什么没有$destroy触发?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我不知道为什么在以下示例中没有触发$ destroy事件。有人可以解释为什么它不被触发,在什么情况下会被触发?

这是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>
问题是你在监听范围上的$ 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');
      })
    }
  };
}]);

猜你在找的Angularjs相关文章