What is the difference between "dismiss" a modal and "close" a modal in Angular UI-Bootstrap?

58,921

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 */ })

Share:
58,921

Related videos on Youtube

Green
Author by

Green

Node.js Angular, React, React-native JavaScript AWS Full Stack Web Developer from Ukraine.

Updated on April 25, 2020

Comments

  • Green
    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
    jan over 10 years
    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.
  • lm.
    lm. about 10 years
    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
  • JB Nizet
    JB Nizet about 10 years
    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 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'
    M'sieur Toph' over 9 years
    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...
  • JB Nizet
    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
    mellis481 over 9 years
    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?
  • JB Nizet
    JB Nizet over 9 years
    @im1dermike: you should ask your own question, and provide the code, observed and expected bahavior.
  • mellis481
    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
    Jared Sol over 6 years
    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.
  • runderworld
    runderworld about 6 years
    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).