Reputation: 7532
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.
Upvotes: 5
Views: 6955
Reputation: 6256
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.
Upvotes: 5
Reputation: 2620
you can unbind event with the method unbind()
$document.unbind('click');
will remove your event handler
refer to angular.element documentation
Upvotes: 6