$ destroy가 실행되면 지시문에서 이벤트 처리기를 제거해야합니까?

Question

AngularUI team을 포함하여 많은 지시문 예제를 보았습니다. 여기에는 정리 작업이 수행되지 않습니다.

다음은 ui-date 지시문에서 jQuery datepicker를 만드는 예입니다. (source)

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

그들은 요소에 이벤트 핸들러를 배치,하지만 시점에서 그들은 이제까지 이벤트 바인딩을 해제 않습니다. 나는 다음과 같은 코드가 존재할 것으로 기대했을 것입니다.

var namespace = ".uiDate"; 

element.on('blur' + namespace, function() { ... }); 
element.on("$destroy" + namespace, function() 
{ 
    element.datepicker("destroy");  //Destroy datepicker widget 
    element.off(namespace);    //Unbind events from this namespace 
}); 

그래서 내가 이해할 수없는 것이 있는지 궁금합니다. 이 지시문이 생성되고 반복적으로 파괴되는 상황에서 메모리 누수가 발생하지 않았습니까?

무엇이 누락 되었습니까?

Answer 1

네, 이상적으로는 지시문에 링크 된 요소 이외의 요소에 연결된 이벤트 처리기를 정리해야합니다.

Fore example 예에서 지시문의 요소를 수정하기 위해 창 크기 조정 기능이있는 경우 지시문을 삭제할 때 window resize 이벤트를 제거해야합니다. 여기

내가 구축했다 예를 들어 지시자 그리고 당신은 내가 지시의 범위를 외부에 부착 된 이벤트 핸들러 바인딩을 해제했다 볼 수 있습니다

lrApp.directive('columnArrow',function($timeout){ 
    return { 
    restrict : 'A', 
    scope : { 
     active : '=columnArrow' 
    }, 
    link: function($scope, elem, attrs, controller) { 
     $scope.$watch('active',function(){ 
      $timeout(function(){ 
      adjust(); 
      },0); 
     }); 

     $(window).resize(adjust); 

     elem.parents('.column-content').scroll(adjust); 

     $scope.$on('$destroy', function() { 
      elem.removeClass('hide'); 
      elem.parents('.column-content').unbind('scroll',adjust); 
      $(window).unbind('resize',adjust); 
     }); 

     function adjust(e) { 
      if($scope.active) { 
      var parentScroll = elem.parents('.column-content'); 
      var parent = elem.parent(); 
      var visible = inView(parentScroll[0],parent[0]); 
      if(!visible) { 
       elem.addClass('hide'); 
      } else { 
       elem.removeClass('hide'); 
      } 
      var offset = parent.offset(); 
      var w = parent.outerWidth(); 
      var h = (parent.outerHeight()/2) - (elem.outerHeight()/2); 
      elem.css({'top':offset.top + h,'left':offset.left + (w + 5)}); 
      } 
     }; 

    } 
    } 
});