What is the difference between "dismiss" a modal and "close" a modal in Angular UI-Bootstrap?
Solution 1
The answer is in the documentation, right after the two lines you quoted:
The open method returns a modal instance, an object with the following properties:
- close(result) - a method that can be used to close a modal, passing a result
- dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
- result - a promise that is resolved when a modal is closed and rejected when a modal is dismissed
The important bit here being what happens to the promise. On close, the promise is resolved - essentially, the "success" callback fires. On dismiss, the promise is rejected, therefore running the "failure" callback instead.
Solution 2
I found that the dismissing of a modal is best to use if it is from a user closing the modal (e.g. returning to the state behind the modal and invoking state.go('^')), and the closing of the modal is used when changing state via $state.go or ui-sref.
That way you can use the result
promise to do different things, depending on the what happens.
result.then(function() { /* state change via ui-sref */ })
result.catch(function() { /* user closed modal */ })
Related videos on Youtube
Green
Node.js Angular, React, React-native JavaScript AWS Full Stack Web Developer from Ukraine.
Updated on April 25, 2020Comments
-
Green almost 4 years
What is the difference between "dismiss" a modal and "close" a modal?
close(result) - a method that can be used to close a modal, passing a result dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
-
jan over 10 yearsThe important bit here being what happens to the promise. On close, the promise is resolved - essentially, the "success" callback fires. On dismiss, the promise is rejected, therefore running the "failure" callback instead.
-
lm. about 10 yearsI have additional question here : From UI perspective what means to dismiss the dialog ? As I understand the dialog can be closed by user either with "OK" or with "Cancel" (also with "x" on the window). How it can be dismissed from UI ? Thanks in advance
-
JB Nizet about 10 yearsIt means what you want it to mean. The template of the dialog is up to you. You could have 4 buttons in the template, two dismissing it each with its own reason, and two closing it each with its own result. Look at the demo at angular-ui.github.io/bootstrap: the OK button calls ok(), which itself closes the dialog with a selected item as a result, and the cancel button calls cancel(), which dismisses the dialog with 'cancel' as a reason.
-
M'sieur Toph' over 9 yearsThx, but I have another question about that : what is the real meaning of dismiss ? Is it just like close without a promise ? And the reason, what is its main purpose? What is the difference between dismissing with 'foo' or with 'bar' ? I don't get how to use this parameter... If somebody can explain...
-
JB Nizet over 9 years@M'sieurToph' The reason passed is entirely up to you. You could imagine having two buttons "No, never" and "Maybe later" that both close the modal, but with a different reason, causing a different outcome.
-
mellis481 over 9 yearsRunning into a weird issue. I have a form in my modal which I bond a User model to. The form has an
ng-submit
save method set which works when I click a submit button in the form. I have a cancel button, though, which I linked to execute$modalInstance.close();
which it runs and subsequently runs my submit method. I was able to resolve this by setting my model$scope.user = null
in the cancel() method, but what is this behavior all about? -
JB Nizet over 9 years@im1dermike: you should ask your own question, and provide the code, observed and expected bahavior.
-
mellis481 over 9 years@JBNizet: you're right, but I figured it out. A stupid mistake that bites me in the ass every now and then and that's forgetting to set a button's type to
button
. :P -
Jared Sol over 6 yearsThis is important because when a modal is dismissed then the promise is not resolved meaning you will get a console error unless you catch the error. I'm not a big fan since dismiss is often used for cancel which is not an actual problem. Implementing a catch prevents the error from being thrown.
-
runderworld about 6 yearsThis answer assumes the user is using the third-party
ui-router
lib, which is not always the case (nor does the question include it).