Question

79

angular ui modal after close event

rated 0 times [ 80] [ 1] / answers: 1 / hits: 56839 / 11 Years ago, mon, september 23, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

chase

Add To Favorites

Follow

Total Points: 78

Total Questions: 106

Total Answers: 93

Location: Comoros

Member since Tue, Mar 14, 2023

1 Year ago

chase questions

1 How to set the download file extension for blob data

Thu, Mar 31, 22, 00:00, 2 Years ago

1 React changing react-icon color on mouse hover

Thu, Jul 1, 21, 00:00, 3 Years ago

1 Passing Objects as Argument to GraphQL Mutation (graphql-request)

Sun, Dec 20, 20, 00:00, 3 Years ago

1 how to get data from response from fetch javascript request

Sat, Dec 12, 20, 00:00, 4 Years ago

1 CSS select all previous siblings for a star rating

Mon, Sep 14, 20, 00:00, 4 Years ago

View All

answered 11 Years ago kenyamelinad · Accepted Answer

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 :

then(successCallback, errorCallback, notifyCallback)

successCallback is executed when the promise is resolved.

errorCallback is executed when the promise is rejected.

notifyCallback is executed when notified.

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 :

dialog.result.then(function () {

  alert('Modal success at:' + new Date());

}, function () {

  alert('Modal dismissed at: ' + new Date());

});

You can see a working plunker here