How to safely clean up AngularJS event binding in a directive

Question

I have an Angular directive that sets an element\'s height equal to the inner height of the browser window (+/- a given offset). This directive responds to the window\'s \"r

Answer 1

I had the same question a few weeks ago.

After looking through the jqLite source (https://github.com/angular/angular.js/blob/master/src/jqLite.js), we see that the on method adds the event and the off method removes the event via the jqLiteOff function.

Looking deeper, we see jqLiteRemoveData calls jqLiteOff. jqLiteRemoveData is called by jqLiteDealoc. jqLiteDealoc gets called in a few places: jqLiteEmpty, html, replaceWith, and remove. jqLiteEmpty gets assigned to the element's empty method, which clears the element in jQuery. html, replaceWith and remove are jQuery mimics.

Doing a search on where remove() is called on an element, we see that it is used on most, if not all, DOM manipulation logic. You can see it in ngIf, ngSwitch, ngInclude and ngView.

So I think Angular does handle event listener cleanup, as long as you use jqLite to attach events and call remove() appropriately in your own DOM manipulation logic. Using jQuery to wrap an element would mess up a lot of processes, including event listener cleanup, but I guess you are already fully aware of that since you are using angular.element.