$ destroyが実行されると、ディレクティブでイベントハンドラを削除する必要がありますか？

Question

私は、AngularUI teamのものを含め、多くのディレクティブの例を見てきましたが、ここではクリーンアップはしていません。

これは、jQueryのdatepickerを作成するui-date指示文の例です。 (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の例ディレクティブに要素を変更するウィンドウのサイズ変更機能がある場合、ディレクティブが破棄されたときにウィンドウのサイズ変更イベントを削除する必要があります。

ここで私が構築するために、あなたは私がディレクティブのスコープの外に取り付けたイベントハンドラをバインド解除しなければならなかった見ることができなかった例ディレクティブです：

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

    } 
    } 
});