Detect $ closure by modal background

Question

I am using AngularJS with angularUI-bootstrap. Is there a way to detect when a modal closes by clicking on the background? I am trying to change a boolean based on modal closure.

Answer 1

Of course, it is very easy to detect an ESC close / click on the background. If such an event occurs, the promise resultwill be rejected. That way, you can run any logic by adding an error handler to the promise resultreturned by the method $modal.open({...}).

You can see this in action in the plunker forked from the demo page ( http://angular-ui.imtqy.com/bootstrap/ ): http://plnkr.co/edit/QJbjkB7BUT5VFInVPyrF?p=preview , where the code $log.info('Modal dismissed at: ' + new Date());is executed when disabling the mod.

Answer 2

An old question, but if you want to add confirmation dialogs for various closing actions, add this to your modal instance controller:

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

, "". ( ) . . , , , .

Answer 3

You can do it like this:

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

Answer 4

This is another quick way to catch a rejected promise (i.e. modal dismissal either intentionally or by clicking the background):

$modal.open({ ... })
.result.catch(function(){
   // do something
});