Czy procedury obsługi zdarzeń muszą zostać usunięte w dyrektywach, gdy $ destroy obstaje?

Question

Widziałem wiele przykładów dyrektyw, w tym te z AngularUI team, gdzie nie wydają się czyścić.

Oto przykład z dyrektywy ui-date, która tworzy dateticker jQuery. (source)

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

one umieszczane obsługi zdarzeń na elemencie, ale w żadnym momencie nie kiedykolwiek rozpiąć zdarzenia. Spodziewałam się obecności kodu:

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

To sprawia, że ​​zastanawiam się, czy jest coś, czego nie rozumiem. Czy to, co robią, nie spowoduje przecieku pamięci w sytuacjach, gdy element w/tej dyrektywie jest tworzony i niszczony w kółko?

Czego mi brakuje?

Answer 1

Tak, najlepiej wyczyść wszystkie programy obsługi zdarzeń dołączone do elementów innych niż element powiązany z dyrektywą.

Na przykład, jeśli w swojej dyrektywie masz funkcję zmiany rozmiaru okna, aby zmodyfikować element dyrektywy, będziesz musiał usunąć zdarzenie zmiany rozmiaru okna, gdy dyrektywa zostanie zniszczona.

oto dyrektywa przykład musiałem zbudować i widać musiałem rozpiąć obsługi zdarzeń załączone poza zakresem dyrektywy:

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

    } 
    } 
});