angular unbind events when you leave a route

Issue

One of routes in my application requires some special keypress event bindings, but none of the other routes do.

So, in that route's controller I'm binding the event like so:

angular.element( document.body ).bind('keydown keypress', function (event)
{
   //...
});

and I just noticed that when I navigate to that route, and then leave and go to a different route, those keyboard event bindings are still active.

How can I unbind the events whenever the route changes to a different controller?

Solution

You could unbind the event when scope gets destroyed.

$scope.$on('$destroy', function() {
    angular.element( document.body ).unbind('keydown keypress', handler);
});

http://api.jquery.com/unbind/ has references on how to unbind events.

The $destroy event gets fired whenever a scope gets destroyed in angular.

Answered By - Steve