Do we need to unbind event listeners in directives

2019-01-19 10:15发布

问题:

There is a heavy memory leak in my application but I haven't found out the causes, and here is the background.

  • I am using AngularJS + JQuery(plugins)
  • Many listeners are bound like the following:

    $(element).on("keyup", function() {});

So the question is

Do I need to unbind those listeners in directives by following?

scope.$on("$destroy", function() {
    $(element).off();
}); 

BTW, how do you usually find out the memory leak in a web application? I use chrome's profile (see here Profiling memory performance) but I could not trace to the codes where memory leaks. Do you have any suggestions?

Thanks a lot!

回答1:

The Angular documentation for scope destroy, implies that you do need remove DOM events.

http://docs.angularjs.org/api/ng.$rootScope.Scope#$destroy

Note that, in AngularJS, there is also a $destroy jQuery event, which can be used to clean up DOM bindings before an element is removed from the DOM.



回答2:

I must disagree with the accepted answer, your memory leak may have other causes.

Check out this for an excelent answer: AngularJS - Does $destroy remove event listeners?