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

    } 
    } 
});