代码之家 › 专栏 › 技术社区 › Vee6

有没有办法拦截BootstapUI的$uibModal已解除事件?

angular-ui-modal angular-ui-bootstrap

10

Vee6 · 技术社区 · 10 年前

我正在使用Bootstrap UI中的模态组件( https://angular-ui.github.io/bootstrap/ )在Angular中渲染模态,在关闭时,我希望能够重定向到另一个状态,或者至少调用一个函数。

问题是我可以拦截 close 事件,但每当用户按下 Esc 模态被取消,我找不到任何捕获 dismiss 事件或将函数分配给返回的promise。

代码如下:

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

或者,另一个适合我的商业案例的解决方案是简单地不允许用户取消模态。当模态控制器中发生事件时,我自己关闭它。到目前为止,我都没有找到这方面的功能。

1 回复 | 直到 10 年前

1

23

Harris 6 年前

在与模态关联的控制器中(您可以使用“AnotherCtrl”或“模态”),您可以使用 $scope.$on() 使用 'modal.closing' 事件

例子:

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'
});