Как поймать фолд события клика при нажатии angular ui bootsrap modal?

В моем приложении используется функция $modal.open() для открытия модального всплывающего окна, которое использует другую страницу в качестве шаблона. При нажатии кнопки отображается модальное всплывающее окно. Если я нажму кнопку "Отмена", он вызовет эту функцию и отлично работает.

    $scope.cancel=function(){
    });

Но если пользователь нажимает за пределами модального всплывающего окна, мы не можем поймать это событие по этому коду

    $scope.dismiss=function(){
    });

Как я могу поймать это событие?

Я видел много статей AngularJS, но не смог найти решение для этого.

Ответ 1

$modal.open() возвращает объект с обещанием. Вы можете использовать обещание и цепочку, хотя и обрабатывать его в catch. Когда вы нажимаете на задний план, он делает dismiss внутренне и отклоняет обещание.

например: -

var instance = $modal.open(...);

 instance.result.then(function(){
  //Get triggers when modal is closed
 }, function(){
  //gets triggers when modal is dismissed.
 });

Если вы используете это в дочернем элементе, куда вводится $modalInstance, вы можете сделать это и там. Поэтому в основном вместо того, чтобы иметь дело с event, это поможет вам сделать это на более высоком уровне с помощью promises.

Ответ 2

Вы можете использовать

backdrop: 'static'

в ваших настройках. Вот так:

var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html',
    controller: 'ModalInstanceCtrl',
    backdrop: 'static',
    ...
});

Документация Bootstrap 3.0 объясняет, что backdrop: 'static' указывает фон, который не отменяет модальный щелчок.

Ответ 3

Поймайте все клики по html-документу и закройте modal.

Поймать клики внутри модального и остановить распространение.

то есть.

$("html").on("click",closemodal());

$(".modal").on("click",function(event){
   event.stopPropagation();
}

Ответ 4

У меня была та же проблема с Angular Mobile UI Demo (1.2), однако в демонстрационных файлах модальная не объявлена в основном JS.

Вместо этого просто добавив еще две переменные в modal1.html сделал трюк.

<div class="modal-dialog" ui-outer-click="Ui.turnOff('modal1')" ui-outer-click-if="Ui.active('modal1')">

Это объясняется здесь: http://mobileangularui.com/docs/#outer-click

Оба свойства необходимы для его работы.