angularjs close modal window on $ document click

Question

Я работаю над этим весь день, и я застрял. У меня есть модальный/диалог, который появляется при нажатии на div (div находится в той части таблицы im, которая пытается создать параметры сортировки). Функция div запускает ng-click и устанавливает переменную $ scope в true или false. Мне нужно, чтобы модальная была скрыта, когда где-нибудь за пределами div. Кроме того, есть несколько div, которые показывают модальный. Если щелкнуть другой div, скройте текущий модальный и снова покажите модальное значение с этой областью $.

<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> 

У меня есть директива для модального, которая отслеживает это значение, установленное showModal() и отображает.

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

Модальная директива:

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); 
       } 
      } 
     } 

Тесная модальная директива (устанавливается в качестве атрибута в модальном шаблоне)

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 может отсутствовать несколько вещей здесь, но здесь» мой вопрос. Мой клик по div показывает модальный, затем мгновенно закрывает его. Это связано с тем, что моя функция showModal вызывается перед моим слушателем $ document.on. Могу ли я либо 1) получить первое нажатие на клик, либо 2) что-то еще ...

Answer 1

Событие щелчка пузырьков вверх по DOM. Таким образом, ваш прослушиватель кликов $document получает одно и то же событие щелчка, открывшего модальный, после того, как модальная функция открыта.

Вы можете использовать event.stopPropagation(), чтобы остановить событие от барботажа дальше DOM другим слушателям. Угловая позволяет прохождение $event Into ng-click функции (как вы можете видеть в вашем HTML, где вы передаете с с ng-click="showModal($event)"

Таким образом, применяется к коду, вы можете сделать:.

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