模式关闭后捕获Angular Bootstrap UI $ uibModal关闭事件

时间:2021-07-25 19:41:07

I'm opening a modal window using $uibModal.open from another controller, and need to be notified when the modal window was closed completely (and not during closing...) so I'll be able to run a function.

我正在使用来自另一个控制器的$ uibModal.open打开一个模态窗口,并且需要在模态窗口完全关闭时通知(而不是在关闭期间...)所以我将能够运行一个函数。

The code that opens the modal is as follows:

打开模态的代码如下:

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

I saw some suggested solutions to use:

我看到了一些建议的解决方案:

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

The problem is that the function callback is called prior to the actual closing of the modal window (when the modal window is still open) and this is not the behavior I want cause it means that it catches the "closing" event and not the "closed" event of the modal.

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

Is there a neat and simple way to implement this? I'd be surprised if not since this behavior is very common in any UI frameworks on the planet...

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

Please help!

请帮忙!

2 个解决方案

#1


23  

Try this.

尝试这个。

.open method returns a promise that could be chained with .closed which is one of the many properties of .open method.

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

I tested it and it shows the alert only after the modal has closed and not while it's 'closing'.

我测试了它,它只在模态关闭后显示警报,而不是在它关闭时显示。

Refer the 'closed' under Return section 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');
});

here is the plunker http://plnkr.co/edit/yB3k8e3R3ZLQFQ6sfLYW?p=preview

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

#2


0  

Use modalInstance.result promise second callback to catch the closing event. I'm also getting exception 'Unable to get property 'then' of undefined or null reference' on .closed.then ,

使用modalInstance.result承诺第二个回调来捕获结束事件。我也在.closed.then上获得异常'无法获取属性'然后'未定义或空引用',

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

#1


23  

Try this.

尝试这个。

.open method returns a promise that could be chained with .closed which is one of the many properties of .open method.

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

I tested it and it shows the alert only after the modal has closed and not while it's 'closing'.

我测试了它,它只在模态关闭后显示警报,而不是在它关闭时显示。

Refer the 'closed' under Return section 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');
});

here is the plunker http://plnkr.co/edit/yB3k8e3R3ZLQFQ6sfLYW?p=preview

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

#2


0  

Use modalInstance.result promise second callback to catch the closing event. I'm also getting exception 'Unable to get property 'then' of undefined or null reference' on .closed.then ,

使用modalInstance.result承诺第二个回调来捕获结束事件。我也在.closed.then上获得异常'无法获取属性'然后'未定义或空引用',

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