关闭事件后的ui模式

时间:2022-06-02 11:28:50

Is there a way I can call a function after a modal window got called (no matter if it happened with a button or by clicking on the backdrop)

是否有一种方法可以在一个模态窗口被调用后调用一个函数(无论它是通过按钮还是通过点击背景)

var dialog, options;

options = {
  windowClass: "lightBox"
  templateUrl: "url to the template",
  controller: "some random controller",
  scope: $scope
});

$("body").css({
  'overflow': 'hidden'
});

dialog = $modal.open(options);

dialog.result.then(function() {
  $("body").css({
    'overflow': 'auto'
  });
});

I want that everytime the modal windows closes the function in the result.then promise get executed. Now it just executes when i close the modal manually my $modalInstance.close(). But if i click on the backdrop this method doesn't get called

我希望每次模态窗口关闭结果中的函数。然后承诺得到执行。现在,当我手动关闭模式时,它才会执行。但如果我点击背景,这个方法就不会被调用。

any idea how i can do this?

知道我怎么做吗?

2 个解决方案

#1


57  

I will assume that you are using the Modal dialogs from angular-ui. But before going into the details a bit of documentation around promises in AngularJS is needed. You need to know that every then function can accept 3 parameters as such :

我假设您正在使用来自angular-ui的模态对话框。但是在详细讨论之前,需要一些关于AngularJS中承诺的文档。你需要知道,每一个then函数都可以接受3个这样的参数:

then(successCallback, errorCallback, notifyCallback) 
  • successCallback is executed when the promise is resolved.
  • 当承诺得到解决时,执行成功的回签。
  • errorCallback is executed when the promise is rejected.
  • 当承诺被拒绝时,errorCallback执行。
  • notifyCallback is executed when notified.
  • notifyCallback在收到通知时执行。

In the case of angular-ui's modal, clicking on the backdrop will result in a rejected promise. With this in mind, your code could be changed to :

在angular-ui模式的情况下,单击背景将导致拒绝承诺。考虑到这一点,您的代码可以更改为:

dialog.result.then(function () {
  alert('Modal success at:' + new Date());
}, function () {
  alert('Modal dismissed at: ' + new Date());
});

You can see a working plunker here

你可以看到一个工作的活塞

#2


20  

Angular 1.2 supports promises with a finally(callback):

角1.2支持最终(回调)的承诺:

dialog.result.finally(function() {
    alert('clean up resources');
});

Check out the working plunker here.

检查这里的工作柱塞。

#1


57  

I will assume that you are using the Modal dialogs from angular-ui. But before going into the details a bit of documentation around promises in AngularJS is needed. You need to know that every then function can accept 3 parameters as such :

我假设您正在使用来自angular-ui的模态对话框。但是在详细讨论之前,需要一些关于AngularJS中承诺的文档。你需要知道,每一个then函数都可以接受3个这样的参数:

then(successCallback, errorCallback, notifyCallback) 
  • successCallback is executed when the promise is resolved.
  • 当承诺得到解决时,执行成功的回签。
  • errorCallback is executed when the promise is rejected.
  • 当承诺被拒绝时,errorCallback执行。
  • notifyCallback is executed when notified.
  • notifyCallback在收到通知时执行。

In the case of angular-ui's modal, clicking on the backdrop will result in a rejected promise. With this in mind, your code could be changed to :

在angular-ui模式的情况下,单击背景将导致拒绝承诺。考虑到这一点,您的代码可以更改为:

dialog.result.then(function () {
  alert('Modal success at:' + new Date());
}, function () {
  alert('Modal dismissed at: ' + new Date());
});

You can see a working plunker here

你可以看到一个工作的活塞

#2


20  

Angular 1.2 supports promises with a finally(callback):

角1.2支持最终(回调)的承诺:

dialog.result.finally(function() {
    alert('clean up resources');
});

Check out the working plunker here.

检查这里的工作柱塞。