Removing event listeners from a directive in AngularJS

Question

I'm trying to realize a simple directive in AngularJS. In particular I want to develop a loader button that change its aspect when pressed, and I want to reuse it in all the page of my application that need it.

I have read on the developer guide that:

"There are a few special events that AngularJS emits. When a DOM node that has been compiled with Angular's compiler is destroyed, it emits a $destroy event. Similarly, when an AngularJS scope is destroyed, it broadcasts a $destroy event to listening scopes. By listening to this event, you can remove event listeners that might cause memory leaks. Listeners registered to scopes and elements are automatically cleaned up when they are destroyed, but if you registered a listener on a service, or registered a listener on a DOM node that isn't being deleted, you'll have to clean it up yourself or you risk introducing a memory leak."

In my link function I have put this code for the event listener:

var onLoaderButtonClickEvent = element.on('click', function(){
//Some stuff

});

Now, have I to consider that as a listener on a DOM element (and so I have to remove it) or not? I'm a lit bit confused.

I think that I have not to remove the listener because is on the "element". Is it correct?

Thx to all

Cause I don't understand the difference between "element" and DOM node mentioned in the documentation that I wrote previously. I think that an event like: element.on('click', someFunction) has not to be removed, while an event like: $('#somenode').on('click', somefunction) has to be removed. Is it correct? — ira
– ira, Commented Jan 9, 2014 at 17:38

timetowonder · Accepted Answer · 2015-08-17 16:43:57Z

3

The element.remove() is called automatically when a directive is destroyed, thus removing all listeners on the element. You only have to remove DOM listeners manually if you attached them to any other DOM elements.

From angular's documentation:

Listeners registered to scopes and elements are automatically cleaned up when they are destroyed, but if you registered a listener on a service, or registered a listener on a DOM node that isn't being deleted, you'll have to clean it up yourself or you risk introducing a memory leak.

answered Aug 17, 2015 at 16:43

timetowonder

5,5317 gold badges38 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

thomaux · Accepted Answer · 2014-09-26 09:59:50Z

1

The answer is yes. As you've attached an event handler outside of AngularJS, you'll need to clean it up yourself.

You can do this by listening to the $destroy event:

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

answered Sep 26, 2014 at 9:59

thomaux

19.8k10 gold badges83 silver badges107 bronze badges

2 Comments

timetowonder Over a year ago

this stackoverflow answer says the opposite.

ndee Over a year ago

see most voted answer and angular documentation.

Collectives™ on Stack Overflow

Removing event listeners from a directive in AngularJS

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related