How to do something when an AngularUI's modal is closed?

Question

I'm working with an AngularUI's modal, and I would like to change a variable of my controller when the modal is closed.

My modal looks like this:

<div class="modal fade" id="awesomeModal" role="dialog"> ... <button type"button" data-dismiss="modal">Close</button> </div>

I guess the close event of the modal has to do with data-dismiss, but I don't find yet how to do something at this specific moment.

What I would like to do is to set $scope.finished = true; when the modal is closed.

I know I can do something like <button type"button" data-dismiss="modal" ng-click="finished = false>Close</button>, but there is, in my opinion, a cleaner way to do it.

Check docs under return angular-ui.github.io/bootstrap/#/modal Syntax is $modal.open({/*params here*/}).result.then(function() { /* logic here */ }); — Mikko Viitala
– Mikko Viitala, Commented Aug 8, 2016 at 9:24
I saw, but I really don't know how to deal with it. So far I had a very simple use of modal. If you think you know how it works, I'm interested you posts a more detailed explanation of it as an answer :) — Mistalis
– Mistalis, Commented Aug 8, 2016 at 9:32

Vishal · Accepted Answer · 2016-08-08 09:42:26Z

Since you are asking about $uibModal, here is the event that can be used to capture the modal close event:

 var modalInstance = $uibModal.open({ templateUrl: 'modules/alertTemplates/redirectToModal.html', controller: 'redirectToController', controllerAs: 'redirectToControllerVm', keyboard: false } }); modalInstance.result.then(function () { // called when you close the modal // do your stuff }, function () { // called when you dismiss modal by clicking anywhere outside modal // do your stuff });

Also, if you want you can give the modal template inline using template instead of templateUrl. Refer following link for better explanation and all the syntax:

https://github.com/angular-ui/bootstrap/tree/master/src/modal/docs

Is all this JavaScript needed? Because I don't use a template for the modal, the code is directly in my HTML page. I'm sorry, maybe am I stupid, but it is still unclear for me... :D
you need to include ui bootstrap.js, then inject $uibModal in your controller. Please refer the link < github.com/angular-ui/bootstrap/tree/master/src/modal/docs >. There are demo html and js attached.

Collectives™ on Stack Overflow

How to do something when an AngularUI's modal is closed?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related