Question

有没有办法阻止AngularJS模态在模态的控制器逻辑中关闭/解除？

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

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

Answer 1

您可以观看'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（）方法）

第三个参数是 boolean ，表示模态是关闭还是被解除。

这是一个有效的plunker

我不知道何时添加，但目前在官方文档中提及。

Answer 2

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

像这样：

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 3

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

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

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

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

3 个答案: