在模态关闭后捕获 Angular Bootstrap UI $uibModal 关闭事件答案

【问题标题】：catching Angular Bootstrap UI $uibModal closed event after the modal was closed在模态关闭后捕获 Angular Bootstrap UI $uibModal 关闭事件
【发布时间】：2016-07-06 10:27:15
【问题描述】：

我正在使用 $uibModal.open 从另一个控制器打开一个模态窗口，并且需要在模态窗口完全关闭时收到通知（而不是在关闭期间...），以便我能够运行一个函数.

打开modal的代码如下：

var modalInstance = $uibModal.open({
  templateUrl: "myModalContent.html",
  controller: "termModalCtrl",
  windowClass: 'app-modal-window',
  resolve: {
    'params': function () { return id }
  }
});

我看到了一些建议使用的解决方案：

modalInstance.result.then(function(result) {
});

问题是函数回调是在模态窗口实际关闭之前调用的（当模态窗口仍然打开时），这不是我想要的行为，因为它意味着它捕获了“关闭”事件并且不是模态的“关闭”事件。

有没有一种简洁的方法来实现它？如果不是，我会感到惊讶，因为这种行为在地球上的任何 UI 框架中都很常见......

请帮忙！

【问题讨论】：

标签： javascript angularjs modal-dialog angular-ui-bootstrap angular-ui-modal

【解决方案1】：

试试这个。

.open 方法返回一个可以与.closed 链接的promise，这是.open 方法的众多属性之一。

我对其进行了测试，它仅在模式关闭后才显示警报，而不是在它“关闭”时显示。

请参阅返回部分下的“关闭”here

var modalInstance = $uibModal.open({
    templateUrl: "myModalContent.html",
    controller: "termModalCtrl",
    windowClass: 'app-modal-window',
    resolve: {
        'params': function () { return id }
    }
}).closed.then(function(){
  window.alert('Modal closed');
});

这里是 plunker http://plnkr.co/edit/yB3k8e3R3ZLQFQ6sfLYW?p=preview

【讨论】：

我尝试了您的解决方案，但它不起作用 - 我收到异常“无法获取未定义或空引用的属性 'then'”。对于 open 方法返回的承诺，似乎属性“关闭”在某种程度上是未定义的......
不。从您的代码中删除 modalInstance.result.then...。
为此，我们必须使用 $uibModalInstance.close('cancel'); 关闭弹出窗口；但不使用解除功能。

【解决方案2】：

使用modalInstance.result 承诺第二个回调来捕获关闭事件。我在.closed.then 上也遇到异常'Unable to get property 'then' of undefined or null reference'，

 var modalInstance = $uibModal.open({
    templateUrl: "myModalContent.html",
    controller: "termModalCtrl",
    windowClass: 'app-modal-window',
    resolve: {
        'params': function () { return id }
    }
});

modalInstance.result
   .then(function (selectedItem) {
    //
   }, function () {
    //close callback
    console.info('modal closed');
   });

【讨论】：