Bill Sparks Bill Sparks - 1 year ago 92
AngularJS Question

How to safely clean up AngularJS event binding in a directive

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 "resize" event and adjusts its height accordingly. When the scope of my directive emits the '$destory' event, I remove the binding to the "resize" event (I think leaving it in place would cause some issues, correct me if I'm wrong).

I don't know how to do this event detachment in a "safe" way. What if I have multiple instances of this directive throughout my app and what if I have other directives that attach to the 'resize' event?

JQuery has the concept of event namespace which seems like a good solution, but Angular's implementation (JQLite) does not support this. I'd rather not use JQuery since I'm already using Angular, so what do I do?

Here's the code for my directive as it is today

window.angular.module('arcFillClient', [])
.directive('arcFillClientY', ['$window',
function ($window) {

function link($scope, el, attrs) {

var setHeight,

setHeight = function (offSetY) {
var newHeight;
offSetY = offSetY || 0;
newHeight = Math.max($window.innerHeight + parseInt(offSetY, 10)) + 'px';

onResize = function () {
var offset;
offset = attrs.arcFillClientY || 0;

attrs.$observe('arcFillClientY', setHeight);
window.angular.element($window).on('resize', onResize);

cleanUp = function () {

$scope.$on('$destroy', cleanUp);
return {
link: link

UPDATE Looks like a case of RTFM, but just in case anyone else wanders in here, here is some more info. Passing the original function (in my case
) to the
works to isolate the scope of the
function. From the docs:

A handler can also be removed by specifying the function name in the handler argument. When jQuery {ahem... JQLite} attaches an event handler, it assigns a unique id to the handler function.

Here's the updated
function from my directive:

cleanUp = function () {
window.angular.element($window).off('resize', onResize);

Thanks tasseKATT, Karolis and Hans for your contributions.

Answer Source

Pass the same function reference to off as you pass to on:

window.angular.element($window).off('resize', onResize);

Instead of:


Demo - Passing function reference to off:

Demo - Not passing function reference to off:

The demos contain two directives both listening to the window resize event. Use the vertical separator between the code and the preview to trigger the event.

You will notice that if you destroy one the other will keep working when passing function reference to off. If you don't, both will stop working.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download