angularjs close modal window on $document click

Question

I've been working on this all day and I'm stuck. I have a modal/dialog that appears when a div is clicked (the div is in the th of a table im trying to create sorting options). The div fires ng-click and sets a $scope variable to true or false. I need that modal to hide when anywhere outside the div is clicked. In addition, there are multiple divs that show the modal. If another div is clicked, hide the current modal and show the modal again with that $scope.

<table>
 <thead>
  <th>Category 1 <div class="optionbox" ng-click="showModal($event)"></th>
  <th>Category 2 <div class="optionbox" ng-click="showModal($event)"></th>
  <th>Category 3 <div class="optionbox" ng-click="showModal($event)"></th>
 </thead>
</table>

I have a directive for the modal that watches that value set by showModal() and displays.

$scope.showModal = function(event){
      $scope.isModalVisible = !$scope.isModalVisible;
}

The modal directive:

angular.modal('app', []).directive('modal', function(){
      return {
         templateUrl : ..., 
         restrict : 'E',
         link : function($scope, element, attrs){
            ...
            $scope.$watch('isModalVisible', function(newVal, oldVal){
             if(newVal){
                element.slideUp(1000);
              }else{
                element.slideDown(1000);
              }
           }
        }

The close modal directive (set as an attribute in the modal template)

angular.modal('app', []).directive('globalModalClose', function(){
      return {
         link : function($scope, element, attrs){
            $document.on('click', function(){
               if(element.find('event.target').length() < 1){
                 element.hide()
               }
            });
        }

I may be missing a few things here but here' my issue. My click on the div shows the modal, then instantly closes it. This is because my showModal function is called before my $document.on listener. Can I either 1)get the click listener to fire first or 2)something else...

Ryan Ryan · Accepted Answer · 2015-02-28T06:30:12

The click event bubbles up the DOM. As such, your $document's click listener is receiving the same click event that opened the modal, after the modal is open.

You can use event.stopPropagation() to stop the event from bubbling further up the DOM to other click listeners. Angular allows passing the $event into ng-click functions (as you can see in your HTML, where you are passing with with ng-click="showModal($event)".

So, applied to your code, you can do:

$scope.showModal = function(event) {
  event.stopPropagation();
  $scope.isModalVisible = !$scope.isModalVisible;
};

angularjs close modal window on $document click

1 Answers