AngularJS modal async close doesn't work

Question

I am creating a modal and closing it once data comes in the background.

var modal = modal.open({..some params..});

//after data loads
modal.close();

So my problem is, since everything is asynchronous if my data comes instantaneously then my modal.close() executes before modal opens fully and then my screen remains stuck with the modal screen.

One solution I found is adding a timeout to the modal.close

$timeout(function() {
 modal.close();
}, 1)

This works but is it the right way to do it? Or there is some other better solution?

How are you getting the data? If using angular $http service, you can use the success/error on the returned promise object to broadcast a message and then your controllers can act on it.... — juju
– juju, Commented Jul 21, 2015 at 15:37
I get the data from a cache service which already has data cached! — KingJames
– KingJames, Commented Jul 21, 2015 at 15:39

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

The modal instance has an opened promise on it that you should use to guarantee the modal has finished opening before you try to close it. From the docs:

opened - a promise that is resolved when a modal gets opened after downloading content's template and resolving all variables

rendered - a promise that is resolved when a modal is rendered.

Mixing it with your HTTP request might look like

modal = $modal.open({...})
$http.get(...).then(function(response) {
  modal.opened.then(modal.close)
})

Here's a demo of both the way you're currently doing it and doing it using opened.

$scope.open = ->
  modalInstance = $modal.open(
    templateUrl: 'myModalContent.html',
    controller: 'ModalInstanceCtrl'
  )

  if $scope.work
    modalInstance.opened.then(->
      modalInstance.close()
    )
  else 
    modalInstance.close()

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 21, 2015 at 15:50

Kristján

19k5 gold badges55 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS modal async close doesn't work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related