I'm using Bootstrap UI in conjunction with AngularJS to show a modal dialog, while a $http request is processing. Think of it as a wait dialog. I'd like to keep the code as a simple four-liner that I can drop in at various locations like this:

$scope.foobar = function() {
  var waitDialog = $uibModal.open({ templateUrl: 'waitDialog.html' });
  waitDialog.result.catch(function() { /** Rejection ignored */ });

  MyService.doSomething()
  .then(function onSuccess(response) {
    waitDialog.dismiss('Success.');
    // ...
  })
  .catch(function onError(response) {
    waitDialog.dismiss('Failed.');
  });
};

This works fine most of the time, but every now and then the modal dialog does not close programmatically. It remains open, even though the HTTP request returned a result. I've added a close button to the dialog, so users can still dismiss it by calling $dismiss() manually.

I do not understand, however, why the dialog is not always dismissed programmatically. I'm aware of the fact, that $http returns a promise and there might be a delay. But I have debugged the code by printing the waitDialog object to console and it always seems to be both, defined and the identical object. I don't see any scope problems. What am I missing?

CodePudding user response：

You cannot close modal before it is opened, so should be waitDialog.opened.then(() => waitDialog.dismiss())