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

标签 angularjs angular-ui angular-bootstrap

有没有办法防止 AngularJS 模态在模态的 Controller 逻辑中关闭/关闭?

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

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

最佳答案

您可以观看广播到模态范围的“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()方法的任何东西)

第三个参数是一个 bool 值,表示模式是关闭还是关闭。

这里是工作 plunker

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

关于angularjs - 根据模态 Controller 内部的逻辑防止 AngularJS 模态关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28429499/

相关文章:

ajax - 带有 Angular : loading tab content on click only with $http 的选项卡

javascript - ui-router html5Mode 不喜欢静态 html 文件的 href

javascript - Angular Bootstrap UI Modal - ng-template 脚本中的访问 ID

angular - 为 Angular 根组件/模块指定 @Input() 参数

css - 如何将类添加到 ui-grid-selection-row-header-buttons 父单元格?

javascript - AngularJS 将 {{post.title}} 更改为另一个 HTML 文件

javascript - 在 UI-Router 中以抽象状态填充公共(public) View

css - AngularJS bootstrap ui - 如何更改 css 样式?

angularjs - 将焦点设置为 ui-grid 中新添加的行

javascript - Protractor by repeater 遍历对象属性