element.remove를 호출할 때 $destroy가 트리거되지 않는 이유는 무엇입니까?
다음 예제에서 $destroy 이벤트가 트리거되지 않는 이유를 알 수 없습니다.트리거되지 않는 이유와 어떤 시나리오에서 트리거되는지 설명해 주실 수 있습니까?
다음은 플렁커입니다: 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에 관한 사건.scope,그렇지만$destroy지금은 그들의 행동이 가능하게 하고 있습니다.element.
from angular.js source (분명히 웹사이트 어딘가에 기록되어 있지만, 찾아보지는 않았습니다):
$destroy- 각진JS가 모든 jqLite/j를 가로챈다.쿼리의 DOM 파괴 apis는 제거되는 모든 DOM 노드에서 이 이벤트를 발생시킵니다.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');
})
}
};
}]);
$destroy 이벤트가 remove() 메서드에서 트리거되지 않는 이유가 무엇인지 궁금합니다.
문서에 따르면 $destroy 이벤트는 두 가지 경우에 발생합니다.
- 스코프가 파괴되기 직전에
- 요소가 DOM에서 제거되기 직전
목적은 "청소"입니다.$destroy 이벤트를 청취하고 필요한 정리를 수행한 후 스코프나 요소를 삭제할 수 있습니다.ngIf, ngSwitch, ngRepeat 및 기타 내장 지시/메소드가 $destroy 이벤트를 사용하여 정리를 수행합니다.
가장 좋은 예는 ngRepeat 명령입니다.
https://github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js
$destroy 이벤트가 트리거되는 것을 339번에서 확인할 수 있습니다.ngRepeat에서 사용하는 목록에서 항목이 제거되기 직전에 이벤트를 청취하고 모든 작업을 수행할 수 있습니다.
ngRepeat $destroy 예제 Plunk -- http://goo.gl/mkozCY
언급URL : https://stackoverflow.com/questions/24666514/why-isnt-destroy-triggered-when-i-call-element-remove
'programing' 카테고리의 다른 글
| 파이썬에서 "(1,) == 1"의 의미는 무엇입니까? (0) | 2023.09.19 |
|---|---|
| iPhone vs iPad/Browser HTML5 인라인 비디오 (0) | 2023.09.19 |
| ASP에서 *all* 예외 처리를 사용하지 않도록 설정합니다.NET Web API 2 (나만의 공간을 만들기 위해)? (0) | 2023.09.19 |
| 프로토콜 기능이 Self를 반환합니다. (0) | 2023.09.14 |
| MySQL의 계층 데이터에서 깊이 기반 트리 생성(CTE 없음) (0) | 2023.09.14 |