Определить закрытие модального окна по фону

Я использую AngularJS с angularUI-bootstrap. Есть ли способ определить, когда модальное окно закрывается, нажав на фон? Я пытаюсь изменить логическое значение на основе закрытия модального окна.


person xv47    schedule 29.05.2014    source источник


Ответы (4)


Конечно, очень легко обнаружить закрытие по ESC / щелчком по фону. Если такое событие произойдет, result обещание будет отклонено. Таким образом, вы можете запускать любую логику, которую захотите, добавив обработчик ошибок к обещанию result, возвращаемому методом $modal.open({...}).

Вы можете увидеть это в действии в плунжере, созданном на демонстрационной странице (http://angular-ui.github.io/bootstrap/): http://plnkr.co/edit/QJbjkB7BUT5VFInVPyrF?p=preview, где $log.info('Modal dismissed at: ' + new Date()); код выполняется при закрытии модального окна.

person pkozlowski.opensource    schedule 29.05.2014
comment
будет ли это работать и для $ dialog? Я вынужден использовать старые версии angular и angular-ui: - / - person xv47; 29.05.2014

Старый вопрос, но если вы хотите добавить диалоговые окна подтверждения для различных действий закрытия, добавьте это в свой модальный контроллер экземпляра:

$scope.$on('modal.closing', function(event, reason, closed) {
    console.log('modal.closing: ' + (closed ? 'close' : 'dismiss') + '(' + reason + ')');
    var message = "You are about to leave the edit view. Uncaught reason. Are you sure?";
    switch (reason){
        // clicked outside
        case "backdrop click":
            message = "Any changes will be lost, are you sure?";
            break;

        // cancel button
        case "cancel":
            message = "Any changes will be lost, are you sure?";
            break;

        // escape key
        case "escape key press":
            message = "Any changes will be lost, are you sure?";
            break;
    }
    if (!confirm(message)) {
        event.preventDefault();
    }
});

У меня есть кнопка закрытия в правом верхнем углу, которая запускает действие «отменить». При нажатии на фон (если он включен) запускается действие отмены. Вы можете использовать это, чтобы использовать разные сообщения для различных событий закрытия. Это мой способ сделать это, я подумал, что это может быть полезно для других, кто наткнется на ваш вопрос.

person Tiago    schedule 16.03.2016

Сделать это можно так:

var instance = modal.open({ ... })

instance.result.then(function success(){
 //Do success things
},function fail(reason){
  if( ~reason.indexOf('backdrop') ){ 
    // Do things when modal closes on backdrop click
  }
});
person dimitrisk    schedule 26.12.2014

Это еще один быстрый способ поймать отклоненное обещание (т.е. модальное отклонение намеренно или путем щелчка по фону):

$modal.open({ ... })
.result.catch(function(){
   // do something
});
person Dr. C. Hilarius    schedule 31.03.2016