基于模态控制器内部的逻辑,防止AngularJS模态关闭

基于模态控制器内部的逻辑,防止AngularJS模态关闭,angularjs,angular-ui,angular-bootstrap,Angularjs,Angular Ui,Angular Bootstrap,是否有办法防止AngularJS模态在模态控制器逻辑中关闭/关闭 我想要的是当用户关闭模式并且模式中的表单包含未保存的数据时显示警告 我试着在比赛结束前寻找一个活动或者其他我可以在比赛中使用的东西,但是到目前为止没有运气 如果在modalInstance中设置background:“static”,是否解决问题 像这样: var modalInstance = $modal.open({ ... backdrop: 'static', ... }); 然后,您只需控制负责关闭模式的

是否有办法防止AngularJS模态在模态控制器逻辑中关闭/关闭

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


我试着在比赛结束前寻找一个活动或者其他我可以在比赛中使用的东西,但是到目前为止没有运气

如果在
modalInstance
中设置
background:“static”
,是否解决问题

像这样:

var modalInstance = $modal.open({
  ...
  backdrop: 'static',
  ...
});
然后,您只需控制负责关闭模式的单击按钮

希望这有帮助

更新1[仅更多信息]

使用
键盘:false
禁用
转义

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


.

您可以观看“modal.closing”事件,该事件广播到modal的作用域,如下所示:

.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()方法的是什么)

第三个参数是一个布尔值,指示模式是关闭还是取消

这是一张工作票


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

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

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

键盘的
ESC
键仍然可以关闭模式,因此,如果您想在文档中禁用
keyboard:false

,则单击“取消”按钮后,他们将使用取消功能。然后在ModalInstanceCtrl中调用“$modalInstance.disclose('cancel');”。你不能在那里检查是否有任何未保存的数据吗?不幸的是,当用户单击背景或按escape键时,模式也会关闭,此功能应保持不变。我检查了模式指令的源代码,找不到任何允许你阻止其关闭的内容。要么分叉它并修改模块,要么使用其他东西。你可以向angular ui团队推荐这一壮举,甚至可以自己添加。谢谢你的思考,我也想到了这一点,但产品负责人希望在选择背景时对话框可以取消。因此,使其保持静态并不是一个选项,不幸的是,它有很多缺点!上一次更新指定了如何捕获事件,但没有阻止事件发生的方法,这是正确的吗?我相信没有任何方法可以阻止模式关闭,以我理解您想要的方式。您可以尝试重写模式的方法。如果我有任何消息,我会更新我的答案。