别事件处理程序需要在指令被删除时$灭大火？ [英] Do event handlers need to be removed on directives when $destroy fires?

问题描述

我已经看到了很多的例子指令包括那些由 AngularUI小组，他们似乎没有做任何清理工作。

I've seen a lot of directive examples including those by the AngularUI team where they don't appear to do any cleanup.

下面是从他们的UI最新指令的例子创建了一个jQuery的日期选择器。
（源）

Here's an example from their ui-date directive which creates a jQuery datepicker. (source)

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

它们放置在元素上的事件处理程序，但在任何时候做他们曾经取消绑定事件。我本来期望那里是code present如：

They placed an event handler on the element, but at no point do they ever unbind the event. I would have expected there to be code present such as:

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

因此​​，这使我怀疑，如果有件事情我不明白。难道他们不会在做什么原因的情况下内存泄漏的地方元素瓦特/此指令创建和销毁一遍又一遍？

So this makes me wonder if there's something I don't understand. Wouldn't what they are doing cause a memory leak in situations where the element w/ this directive is created and destroyed over and over?

我是什么失踪？

推荐答案

是最好你应该清理附加到比挂钩的指令元素等元素的事件处理程序。

Yes ideally you should clean up any event handlers that are attached to elements other than the element linked to the directive.

富勒例如，如果在你的指令，你有一个窗口大小调整功能来修改该指令的元素，你将需要删除的窗口resize事件时，该指令被破坏。

Fore example if in your directive you have a window resize function to modify the element of the directive you will need to remove the window resize event when the directive is destroyed.

下面是一个例子指令，我不得不建立，你可以看到，我不得不解除附加指令范围外的事件处理程序：

here's an example directive I had to build and you can see I had to unbind the event handlers attached outside of the scope of the directive:

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

    }
  }
});

这篇关于别事件处理程序需要在指令被删除时$灭大火？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！