Angular JS - $destroy는 이벤트 청취자를 제거합니까?

Angular JS - $destroy는 이벤트 청취자를 제거합니까?

https://docs.angularjs.org/guide/directive

이 이벤트를 재생함으로써 메모리 누수의 원인이 될 수 있는 이벤트청취자를 삭제할 수 있습니다.범위 및 요소에 등록된 청취자는 파기되면 자동으로 청소되지만, 리스너를 서비스에 등록하거나 삭제되지 않은 DOM 노드에 리스너를 등록한 경우에는 직접 청소해야 합니다.그렇지 않으면 메모리 누수가 발생할 수 있습니다.

베스트 프랙티스:지시문은 스스로 정리해야 한다.element.on('$destroy', ...) 또는 scope를 사용할 수 있습니다.$on's$displays', ...) 명령어가 삭제되었을 때 정리 기능을 실행합니다.

질문:.

나는 가지고 있다element.on "click", (event) ->내 지시안에:

1. 디렉티브가 파기되었을 때 메모리 참조가 있습니까?element.on쓰레기 수집을 막으려고요?
2. 각도 설명서에 따르면 핸들러를 사용하여 이벤트청취자를 삭제할 필요가 있습니다.$destroy방출된 이벤트라는 인상을 받았다.destroy()제거된 이벤트 청취자, 그렇지 않나요?

이벤트 청취자

우선, 「이벤트 리스너」에는, 다음의 2 종류의 「이벤트 리스너」가 있는 것을 이해하는 것이 중요합니다.

1. 를 통해 등록된 범위 이벤트 청취자$on:

   $scope.$on('anEvent', function (event, data) {
     ...
   });
   

2. 예를 들어 를 통해 요소에 연결된 이벤트 핸들러on또는bind:

   element.on('click', function (event) {
     ...
   });
   

---

$125.$disc()

언제$scope.$destroy()를 통해 등록된 모든 청취자가 삭제됩니다.$on그 돈으로요.

DOM 요소 또는 두 번째 종류의 연결된 이벤트 핸들러는 제거되지 않습니다.

즉, 전화는$scope.$destroy()예를 들어, 명령어의 링크 함수 내의 예에서 수동으로 명령어를 통해 연결된 핸들러를 제거하지 않습니다.element.onDOM 요소 자체도 없습니다.

---

요소.삭제()

주의:remove는 jqLite 메서드(또는 AngularjS 이전에 jQuery가 로드된 경우에는 jQuery 메서드)로 표준 DOM 요소 개체에서는 사용할 수 없습니다.

언제element.remove()이 요소와 그 모든 하위 요소가 DOM에서 함께 삭제됩니다.예를 들어, 를 통해 연결된 모든 이벤트핸들러는, 다음과 같습니다.element.on.

요소에 관련된 $scope는 파기되지 않습니다.

더 혼란스럽게 하기 위해 jQuery 이벤트도 있습니다.$destroy요소를 삭제하는 서드파티제 jQuery 라이브러리로 작업하거나 수동으로 제거할 경우 다음과 같은 경우 정리를 수행해야 할 수 있습니다.

element.on('$destroy', function () {
  scope.$destroy();
});

---

지시가 "파괴"되었을 때 취해야 할 조치

이것은 지시가 어떻게 "파괴"되는가에 달려있다.

은 지시문, 즉 이 파괴되는 경우입니다.ng-view현재 보기를 변경합니다., 「 」는ng-view $120을 호출합니다.remove()바람을을쐬쐬쐬

, 이 ,, , 이, 이, 이, 음, 음, 음, 음, 음, 음, 음, 음, 음, 음, 음, this, this, this, this, this, this, this, this this, this, this, this, by, by, by, by, by, by, , by, by, by, by, by, by, by,ng-view:

scope.$on('anEvent', function () {
 ...
});

element.on('click', function () {
 ...
});

두 이벤트 리스너 모두 자동으로 제거됩니다.

다만, 이러한 리스너내의 코드에 의해서, 일반적인 JS메모리 리크 패턴이 실현되고 있는 경우 등, 메모리 리크의 원인이 되는 경우가 있는 것에 주의해 주세요.

뷰 변경으로 인해 디렉티브가 파기되는 일반적인 경우에도 수동으로 청소해야 할 경우가 있습니다.

예를 , 에서 , 에서 청취자를 한 경우$rootScope:

var unregisterFn = $rootScope.$on('anEvent', function () {});

scope.$on('$destroy', unregisterFn);

은 필요하다, 하다, 하다, 하다, 하다.$rootScope어플리케이션의 라이프 타임 중에는 파기되지 않습니다.

$scope가 파괴되었을 때 필요한 청소가 자동으로 실행되지 않는 다른 pub/sub 구현을 사용하거나 지시문이 서비스에 콜백을 전달하는 경우에도 마찬가지입니다.

하나의 은 취소하는 입니다.$interval/$timeout:

var promise = $interval(function () {}, 1000);

scope.$on('$destroy', function () {
  $interval.cancel(promise);
});

디렉티브에 의해 현재 뷰 이외의 요소에 이벤트핸들러가 부가되어 있는 경우는, 이러한 요소도 수동으로 청소할 필요가 있습니다.

var windowClick = function () {
   ...
};

angular.element(window).on('click', windowClick);

scope.$on('$destroy', function () {
  angular.element(window).off('click', windowClick);
});

'에 되었을 때 ' 때 '파괴'되는 를 들 수 .ng-view ★★★★★★★★★★★★★★★★★」ng-if.

DOM 요소 등의 라이프 사이클을 관리하는 커스텀 디렉티브가 있는 경우.물론 더 복잡해질 것이다.

언급URL : https://stackoverflow.com/questions/26983696/angularjs-does-destroy-remove-event-listeners