根据模态控制器内部的逻辑防止 AngularJS 模态关闭

Question

有没有办法在模态的控制器逻辑中阻止 AngularJS 模态来自 closing/dismissing？

我想要的是当用户关闭模态并且模态内的表单包含未保存的数据时显示警告。

我已经尝试搜索关闭前事件或我可以在 official documentation 中使用的其他内容，但到目前为止还没有成功。

Answer 1

如果您在 modalInstance 中设置 backdrop: 'static'，问题解决了吗？

像这样：

var modalInstance = $modal.open({
  ...
  backdrop: 'static',
  ...
});

然后，您只需要控制负责关闭模态框的 ngClick 按钮即可。

希望这对您有所帮助。

更新 1 [只有更多信息]

使用keyboard: false禁用Escape:

var modalInstance = $modal.open({
  ...
  backdrop: 'static',
  keyboard: false
  ...
});

更新 2

我研究并找到了一个选项。在您的模态控制器中，使用：

$modalInstance.result.then(function (e) {
    //...
}, function (e) {
    //called before modal close
});

示例：

var modalInstance = $modal.open({
  templateUrl: templateUrl,
  controller: modalController
});

function modalController($scope, $modalInstance){

... //your code

  $modalInstance.result.then(function (e) {
      //...
  }, function (e) {
      //called before modal close
  });

... //your code

}

但是您需要一种方法来不继续事件以关闭模式。或者允许用户在关闭模式之前保存数据。到此为止。

更新 3

Check this.

Answer 2

您可以观看 'modal.closing' 事件，广播到模态范围，如下所示：

.controller('modalCtrl', function($scope, $modalInstance) {

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

第一个参数是事件，您可以preventDefault()防止它关闭。

第二个参数是原因（传递给$close()方法的任何东西）

第三个参数是一个布尔值，表示模式是关闭还是关闭。

这里是工作plunker

不知道是什么时候添加的，目前官方文档中有提到。

Answer 3

这将阻止背景触发 $modal.close 事件：

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

键盘的 ESC 键仍然可以关闭模式，所以如果你想禁用它，请使用 keyboard: false

根据模态控制器内部的逻辑防止 AngularJS 模态关闭

Prevent AngularJS modal from closing based on logic inside the modal controller

angularjs

angular-ui

angular-bootstrap