How to prevent Angular-UI bootstrap modal closing?

Question

I do have a $modalInstance . I can receive close event notification with the help of the promises:

$modalInstance.result.finally(function() {
  // code here
});

But I don't know how to prevent closing if user closes the model by mistake. I want to ask user if one really wants to close the model and close it if he does. Still I don't want to enable backdrop: 'static' :

$modal.open({
  ... // other options
  backdrop : 'static'
});

Thank you.

Answer 1

I did some more research, and I found another question similar to this one, this is the answer found on that question (feel free to +1 him, and not me)

    $scope.$on('modal.closing', function(event, reason, closed) {
    var r = prompt("Are you sure you wanna close the modal? (Enter 'YES' to close)");

    if (r !== 'YES') {
        event.preventDefault();
    }
});

Put this inside the modal controller.

This is not exactly what you searched for, this will prompt you if you try to close the modal, by dismiss (clicking outside modal), cancel or ok button. You can try and modify it to suit your needs.

Update: Added simple if else check to see what was clicked, and if backdrop was clicked then prompt the user:

    $scope.$on('modal.closing', function(event, reason, closed) {

    if (reason == 'ok' || reason == 'cancel'){
        console.log('closed');
    } else {
        // this is if 'reason' == 'backdrop click' 
        var r = prompt("Are you sure you wanna close the modal? (Enter 'YES' to close)");

        if (r !== 'YES') {
            event.preventDefault();
        }
    }
});

Do you think this solution is sufficient?