关闭事件后的角度ui模态

Saf*_*ari 39 javascript jquery twitter-bootstrap angularjs angular-ui

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

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'
  });
});
Run Code Online (Sandbox Code Playgroud)

我希望每当模态窗口关闭结果中的函数时,然后执行promise.现在它只是在我手动关闭模态我的$ modalInstance.close()时执行.但如果我点击背景,这个方法就不会被调用

任何想法我怎么能这样做?

Nic*_*RIC 59

我将假设您正在使用angular-ui的Modal对话框.但在进入细节之前,需要一些关于AngularJS中承诺的文档.你需要知道每函数可以接受3个参数为这样的:

then(successCallback, errorCallback, notifyCallback) 
Run Code Online (Sandbox Code Playgroud)
  • 在解析promise时执行successCallback.
  • 拒绝承诺时执行errorCallback.
  • notifyCallback在收到通知后执行.

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

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

你可以在这里看到一个工作的plunker


Der*_*rek 20

Angular 1.2支持承诺finally(callback):

dialog.result.finally(function() {
    alert('clean up resources');
});
Run Code Online (Sandbox Code Playgroud)

在这里查看工作的plunker .

  • 记住`finally`在IE8中不起作用.可能的解决方法 - http://www.antonydenyer.co.uk/blog/2014/08/22/angularjs-decorator-to-support-ie8-catch/ (2认同)