如何防止 Angular-UI 引导模式关闭？答案

【问题标题】：How to prevent Angular-UI bootstrap modal closing?如何防止 Angular-UI 引导模式关闭？
【发布时间】：2015-10-06 09:22:21
【问题描述】：

我确实有一个$modalInstance。我可以在 Promise 的帮助下收到关闭事件通知：

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

但是如果用户错误地关闭模型，我不知道如何防止关闭。我想问用户是否真的想关闭模型并关闭它。我还是不想启用backdrop: 'static'：

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

谢谢。

【问题讨论】：

当您关闭模式时，就像事件触发一样，在我看来您可以以某种方式使用它，我认为这个问题可以帮助您：stackoverflow.com/questions/30356844/…
我认为不需要使用 boostrap 的模态。您可以简单地创建一个 z-index 大于零的 div/form。并根据需要使用 ng-hide/ng-show 来隐藏/可见。
@SaiGiridhar 好吧，我必须在项目中使用它，这是一个要求。上次我做模态时，它只是 VanillaJS :)
@user3266024 看了下没看到答案，以后会仔细看答案，谢谢。

标签： angularjs modal-dialog angular-ui

【解决方案1】：

我做了更多的研究，发现another question 与这个类似，这是在那个问题上找到的答案（请随意 +1 他，而不是我）

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

把它放在模态控制器中。

这与您搜索的内容不完全一样，如果您尝试关闭模式、关闭（单击模式外部）、取消或确定按钮，它将提示您。您可以尝试修改它以满足您的需求。

更新：添加了简单的if else 检查以查看点击了什么，如果点击了背景则提示用户：

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

您认为这个解决方案是否足够？

【讨论】：