88

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
Green
  • 28,742
  • 61
  • 158
  • 247

2 Answers2

100

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.

Community
  • 1
  • 1
JB Nizet
  • 678,734
  • 91
  • 1,224
  • 1,255
  • 35
    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. – Brian Dec 09 '13 at 18:34
  • I 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 – lm. Feb 03 '14 at 08:10
  • 1
    It 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 http://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. – JB Nizet Feb 03 '14 at 08:19
  • 1
    Thx, 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... – M'sieur Toph' Oct 12 '14 at 07:31
  • @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. – JB Nizet Oct 12 '14 at 07:36
  • Running 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? – mellis481 Nov 13 '14 at 19:28
  • @im1dermike: you should ask your own question, and provide the code, observed and expected bahavior. – JB Nizet Nov 13 '14 at 20:34
  • 1
    @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 – mellis481 Nov 14 '14 at 13:15
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 */ })

AnthW
  • 523
  • 5
  • 19
  • 1
    This 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. – Jared Sol Nov 03 '17 at 17:47
  • This answer assumes the user is using the third-party `ui-router` lib, which is not always the case (nor does the question include it). – runderworld Jan 09 '18 at 17:45