Я использую AngularJS с angularUI-bootstrap. Есть ли способ определить, когда модальное окно закрывается, нажав на фон? Я пытаюсь изменить логическое значение на основе закрытия модального окна.
Определить закрытие модального окна по фону
Ответы (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());
код выполняется при закрытии модального окна.
Старый вопрос, но если вы хотите добавить диалоговые окна подтверждения для различных действий закрытия, добавьте это в свой модальный контроллер экземпляра:
$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();
}
});
У меня есть кнопка закрытия в правом верхнем углу, которая запускает действие «отменить». При нажатии на фон (если он включен) запускается действие отмены. Вы можете использовать это, чтобы использовать разные сообщения для различных событий закрытия. Это мой способ сделать это, я подумал, что это может быть полезно для других, кто наткнется на ваш вопрос.
Сделать это можно так:
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
}
});
Это еще один быстрый способ поймать отклоненное обещание (т.е. модальное отклонение намеренно или путем щелчка по фону):
$modal.open({ ... })
.result.catch(function(){
// do something
});