我不知道为什么在以下示例中没有触发$ 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'); }) } }; }]);