How to remove a click binded to $document

Question

I have a popup that i want to close when clicked anywhere else on screen, I do this by triggering $document.bind('click',function(){...}); inside the open function $scope.open = function(){...}.

I also have another function for close $scope.close = function(){...}

The objective is to remove the bind inside the close function.

I am new to angular and so unfortunately I dont fully understand the answers I've found on this questions. Theoretically, I know I might be able to achieve this with $destroy, but I have no idea how to physically implement it. Can someone please teach me how to do this?

EDIT: I am doing this in controllers & directives.

Answer 1

When the popup shows, do:

$document.on('click', documentClick);

and in documentClick hide the popover, and do:

$document.off('click', documentClick);

If you encapsulate the popup behavior in a myPopover directive, define these in the link function of the directive. Don't manipulate the DOM in the controller function of the popover directive, and don't do that in a general controller of a page.

Answer 2

you can unbind event with the method unbind()

$document.unbind('click');

will remove your event handler

refer to angular.element documentation