【问题标题】:Is there a way to intercept BootstapUI's $uibModal dismissed event?有没有办法拦截 BootstapUI 的 $uibModal 被解雇事件?
【发布时间】:2020-08-01 02:13:29
【问题描述】:

我在 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】:

    在与模态关联的控制器中(您可以使用“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'
    });
    

    【讨论】:

    • else 条件下的良好纯视频。强烈推荐
    • 它给了我一个语法错误(缺少')')但一旦解决它就像一个魅力
    • 谢谢。你能解释一下你是如何知道拦截 modal.closing 事件的吗?我花了几个小时来阻止原始转义按键/按键/按键事件传播的各种组合,但没有成功。令人难以置信的令人沮丧的是,解决此问题的自然方法不起作用,并且您需要一些其他的魔法才能使其发挥作用。
    • @user467257 如果你去the Angular Bootstrap docs for modals,它有可能在底部发出的事件。 modal.closing 被列为正常关闭的事件广播,他们解释说可以调用 preventDefault() 以保持模式打开。
    • 再次感谢。该链接不起作用,它应该是angular-ui.github.io/bootstrap/#modal(他们的精彩框架似乎在转到锚点时插入了一个额外的“!#”,这意味着如果复制了网址,它就不起作用。非常聪明!)跨度>
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-03-28
    • 2015-10-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多