Click Outside Div - When Div Has Buttons That Fires Events - Angularjs

I'm using the following directive to detect when a click is made outside a div: app.directive('clickOut', function ($window, $parse) { return { restrict: 'A', link: functio

Solution 1:

Its because the event is being propagated to Window object.

- Window
    - document
        - dialog
           - button

In the above hierarchy, if a click event happens on the last button element, the event will be propagated to the parent element until it reaches Window and then will close your dialog.

Solution 1:

Stop event propagation in each controller function by passing the event as a parameter and calling event.stopPropagation() function:

<button type="button" class="form-control btn"  ng-click="onCancelAnnouncement($event)">Cancel</button>

...

$scope.onCancelAnnouncement($event) {
    $event.stopPropagation();
}

Solution 2:

Let the event be propagated and check the target element:

angular.element($window).on('click', function (event) {
        var target = $(event.target);
        if(target.attr("id") === "anyid") { // or target.hasClass("someclass")// or target.closest(".some-selector")// just ignore
        } else {
            // Do whatever you need 
        }
});

Solution 2:

Exactly: events will be presented to every object in the nested DOM-hierarchy unless and until you stop their propagation. This, of course, is by design: JavaScript doesn't assume that "the innermost guy I can find who's listening for this event" is the only guy who might be interested in it. Everyone who says he's listening for it, who is in the position to hear it, is going to hear it, each in their turn ... unless one of them explicitly quashes further propagation, at which JS will stop looking for anyone else to send it to. (No one has to "send the event to the outer container." Instead, they only have to tell JS not to send it on.)