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

问题描述 投票:0回答:1

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

问题是,我可以拦截

close
事件,但是每当用户按下
Esc
时,模式就会被解除,我找不到任何捕获
dismiss
事件或将函数分配给承诺的文档已返回。

代码如下:

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

或者,适合我的业务案例的另一种解决方案是根本不允许用户关闭模式。每当模态控制器中发生事件时,我自己将其关闭。到目前为止我还没有找到这方面的功能。

angular-ui-bootstrap angular-ui-modal
1个回答
23
投票

在与模态关联的控制器(“AnotherCtrl”或“modal”)中,您可以将

$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'
});
© www.soinside.com 2019 - 2024. All rights reserved.