有没有办法拦截 BootstapUI 的 $uibModal 关闭事件?

问题描述

我正在使用 Bootstrap UI (https://angular-ui.github.io/bootstrap/) 在 Angular 中呈现模态，并且在关闭时我希望能够重定向到另一个状态，或者至少可以调用一个函数.

I'm using the modal compoenent from Bootstrap UI (https://angular-ui.github.io/bootstrap/) in Angular to render a modal, and on closing I want to be able to redirect to another state, or at least have a function be called.

问题是我可以拦截 close 事件，但是每当我用户按下 Esc 时，模式就会被解除，我找不到任何捕获 的文档解除事件或为返回的promise分配一个函数.

The problem is I can intercept the close event but whenever I user presses Esc the modal is dismissed and I couldn't find any documentation of catching the dismiss event or assigning a function to the promise that is returned.

代码如下:

var modalInstance = $uibModal.open({
  templateUrl: 'a-template.html',
  controller: 'AnotherCtrl',
  controllerAs: 'modal',
  backdrop: false,
  size: 'lg'
});

// I am able to catch this whenever the user exits the modal in an
// orthodox fashion. Doesn't happen when he presses Esc button.
modalInstance.closed = function () {
  $state.go(homeState);
};

另一种适合我的业务案例的解决方案是简单地不允许用户关闭模式.并在模态控制器中发生事件时自行关闭它.到目前为止，我还没有找到这方面的功能.

Alternatively another solution that would suit my business case would be to simply not allow the user to dismiss the modal. And close it myself whenever an event happens in the modal controller. I neither found functionality for this so far.

推荐答案

在与模态(AnotherCtrl"或modal"为你)关联的控制器中，你可以使用 $scope.$on() 与 'modal.closure' 事件.

In the controller associated with the modal ("AnotherCtrl" or "modal" for you), you can use $scope.$on() with the 'modal.closing' event.

示例:

var modalInstance = $uibModal.open({
  templateUrl: 'a-template.html',
  controller: ['$scope', function($scope){
    $scope.$on('modal.closing', function(event, reason, closed){
        if('condition for not closing')
            event.preventDefault(); //You can use this to prevent the modal from closing
        else
            window.location = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
    });
  }],
  controllerAs: 'modal',
  backdrop: false,
  size: 'lg'
});

这篇关于有没有办法拦截 BootstapUI 的 $uibModal 关闭事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！