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

Question

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

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

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

Answer 1

您可以观看广播到模态范围的“modal.closure”事件，如下所示：

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

第一个参数是event，你可以通过preventDefault()来阻止它关闭。

第二个参数是原因（无论传递给$close()方法）

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

这是一个工作的笨蛋

我不知道这是什么时候添加的，但目前在官方文档中提到了。

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

检查这个。

Answer 3

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

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

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