dialog: add support for closing all open dialogs

[raDiesle]

When any dialog is opened and you switch state, e.g. with back button of browser, the dialog is still opened.

What would be a smart solution to overcome this?

[topherfangio]

We do not currently have a way to close all open dialogs. I think the most elegant solution is to open your dialog via a route so that when you switch states, you can close the dialog in the exitState function.

Alternatively, when you open a dialog, you can keep add the reference returned from $mdDialog.show() to an array/list and iterate over the list and call $mdDialog.hide(reference) to close them.

[simonered]

@ericel 's solution is for angular material 1 or 2? What is this.dialog?

[ericel]

@simonered that’s material 2!

[simonered]

That's what I was afraid of...! The problem is that THIS is the repository of angular material 1....

[Splaktar]

I removed the confusing comments about Angular Material's dialog and it's closeAll support. This is not supported in AngularJS Material.

It does look like the groundwork for this is supported in https://github.com/angular/material/blob/v1.1.10/src/core/services/interimElement/interimElement.js#L338-L377 via passing {closeAll: true} into the hide() function. However, dialog does not support passing these options through: https://github.com/angular/material/blob/v1.1.10/src/components/dialog/dialog.js#L657-L670.

We would be happy to consider a PR from the community that added the ability to specify $mdDialog.hide(result, {closeAll: true}) to close all open dialogs. As part of that PR, we would need to update the current documentation on multiple dialogs.

[wassim-ss]

This is one way to do it:

close-modals.js

export function closeModals($document, $mdDialog, $transitions) {

    $transitions.onExit({}, () => {

        const count = $document.find('md-dialog').length;

        for (let i = 0; i < count; ++i) {
            $mdDialog.cancel();
        }
    });
}

closeModals.$inject = ['$document', '$mdDialog', '$transitions'];

app.js

import { closeModals } from './close-modals';

angular.module('app', []).run(closeModals);