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

所以這讓我想知道是否有什麼我不明白。他們在做什麼導致內存泄漏的情況下，元素w /該指令被反覆創建和銷燬？

我錯過了什麼？

Answer 1

是的，理想情況下，你應該清理附加到鏈接到指令的元素以外的元素的任何事件處理程序。

前面的例子，如果在你的指令中你有一個窗口調整大小的函數來修改指令的元素，當指令被銷燬時你將需要去除窗口大小調整事件。

這裏是一個例子指令，我必須建立，你可以看到，我不得不取消綁定連接指令的範圍之外的事件處理程序：

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

    } 
    } 
});