$mdDialog stacked/nested dialogs, is it possible?

Gabriel Anzaldo Alvarado gave the right answer in my opinion, the correct answer is shared in a Plunker link. But as requested by many users, I'm adding the actual code in case the link becomes unavailable in the future.

Basically, while opening your dialog using the .show({}) function, add the option skipHide: true.

HTML

<body>
 <div ng-controller="AppCtrl as ctrl" 
    ng-cloak="" 
    class="virtualRepeatdemoVerticalUsage" 
    ng-app="MyApp">
  <md-content layout="column">
    <md-button ng-click="ctrl.moreInfo(1)">
       Open Dialog
    </md-button>
  </md-content>
 </div>
</body>

JavaScript

(function () {
  'use strict';

  angular
  .module('MyApp', ['ngMaterial'])

  .controller('AppCtrl', function ($interval, $mdDialog) {
    var vm = this;

    vm.moreInfo = function moreInfo(thing) {
      $mdDialog.show({
        controllerAs : 'dialogCtrl',
        clickOutsideToClose : true,
        bindToController : true,
        controller : function ($mdDialog) {
          this.click = function click() {
            $mdDialog.show({
              controllerAs : 'dialogCtrl',
              controller : function ($mdDialog) {
                this.click = function () {
                  $mdDialog.hide();
                }
              },
              preserveScope : true,
              autoWrap : true,
              skipHide : true,
              template : '<md-dialog class="confirm"><md-content><md-button ng-click="dialogCtrl.click()">I am in a 2nd dialog!</md-button></md-content></md-dialog>'
            })
          }
        },
        autoWrap : false,
        template : '<md-dialog class="stickyDialog" data-type="{{::dialogCtrl.thing.title}}"><md-content><md-button ng-click="dialogCtrl.click()">I am in a dialog!</md-button></md-content></md-dialog>',
        locals : {
          thing : thing
        }
      })
    }
  });
})();

The code above worked for me.

As noted by Vincenzo in another answer, while stacking mdDialogs, the dialogs beneath will not grey-out, there is a CSS trick to solve that: https://stackoverflow.com/a/38013682/366662

UPDATE

This answer works for version 1.1.1, from version 1.1.2 the Material team changed the property from skipHide to multiple. So, be careful when copy-pasting the snippet. Check your Material version and use the correct property accordingly.


UPDATE: As per @Magnus, it was updated to multiple as of v1.1.2

Add skipHide: true to the second dialog's options object.

This works for me: http://webiks.com/mddialog-with-a-confirmation-dialog/

Tags:

Angularjs

Angular Material

Recent Posts