jquery - Do we need to unbind event listeners in directives when angular starts to destroy?

Question

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!

Answer 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.