Trình xử lý sự kiện có cần phải được xóa khỏi chỉ thị khi $ tiêu diệt hỏa hoạn không?

Question

Tôi đã nhìn thấy rất nhiều ví dụ chỉ thị bao gồm những ví dụ của AngularUI team nơi chúng không có vẻ như làm bất kỳ việc dọn dẹp nào.

Đây là một ví dụ từ chỉ thị ngày tháng của chúng, tạo ra một bộ đếm ngày tháng jQuery. (source)

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

Họ đặt một trình xử lý sự kiện trên phần tử, nhưng tại không có điểm nào để họ bao giờ unbind sự kiện này. Tôi đã dự kiến ​​sẽ có mã hiện tại như:

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 
}); 

Vì vậy, điều này làm tôi tự hỏi nếu có điều gì đó tôi không hiểu. Không phải những gì họ đang làm gây ra một rò rỉ bộ nhớ trong các tình huống mà các yếu tố w/chỉ thị này được tạo ra và bị phá hủy hơn và hơn?

Tôi đang thiếu gì?

Answer 1

Có lý tưởng là bạn nên dọn sạch mọi trình xử lý sự kiện được đính kèm với các phần tử khác với phần tử được liên kết với chỉ thị.

Ví dụ Fore nếu trong chỉ thị của bạn, bạn có chức năng thay đổi kích thước cửa sổ để sửa đổi phần tử của chỉ thị, bạn sẽ cần xóa sự kiện thay đổi kích thước cửa sổ khi chỉ thị bị hủy.

đây là một chỉ thị ví dụ tôi đã phải xây dựng và bạn có thể thấy tôi đã phải unbind xử lý sự kiện gắn ngoài phạm vi của chỉ thị:

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)}); 
      } 
     }; 

    } 
    } 
});