Question

我想在另一个上面打开一个$mdDialog。如果可能，请使用无限重叠对话框。

有什么想法吗？

Answer 1

Gabriel Anzaldo Alvarado在我看来给出了正确答案，正确答案在Plunker link中分享。但是，根据许多用户的要求，我将添加实际代码，以防将来链接不可用。

基本上，在使用.show({})功能打开对话框时，添加选项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
        }
      })
    }
  });
})();

上面的代码对我有用。

正如Vincenzo在另一个答案中所指出的，在堆叠mdDialogs时，下面的对话框不会灰显，有一个CSS技巧可以解决：https://stackoverflow.com/a/38013682/366662

<强>更新

此答案适用于版本1.1.1，从版本1.1.2，材料团队changed the property从skipHide到multiple。因此，在复制粘贴代码段时要小心。检查您的材料版本并相应地使用正确的属性。

Answer 2

更新：根据@Magnus，自v1.1.2起更新为multiple

将skipHide: true添加到第二个对话框的选项对象中。

这对我有用：http://webiks.com/mddialog-with-a-confirmation-dialog/

Answer 3

不，现在不可能拥有多个$mdDialog。老实说，我真的需要这个功能并试图让它工作但到目前为止没有成功。让我们希望他们在将来的版本中允许这个功能。
虽然有讨论here，但你可以找到有用的东西。

注意：这不再是正确答案，而是与答案时间段相对应，请查看以下内容以获取更多答案。

Answer 4

嗨，大家好，这是一个有嵌套对话框的解决方法：git - push current vs. push upstream (tracking)

这个想法是当第二个打开时保存第一个状态，当第二个关闭时再次启动第一个对话框。

Answer 5

正如加布里埃尔·安扎尔多·阿尔瓦拉多在评论中所写的那样，你可以在这个普通话上看到： http://plnkr.co/edit/Ga027OYU5nrkua3JxNRy?p=preview

此外，您可以添加一些css类来获得相同的背景灰色叠加： https://github.com/angular/material/issues/7262

._md-dialog-backdrop:nth-of-type(even) {
    z-index: 81;
}

._md-dialog-backdrop:nth-of-type(odd) {
    z-index: 79;
}

.md-dialog-container:nth-of-type(even) {
    z-index: 80;
}

.md-dialog-container:nth-of-type(odd) {
    z-index: 82;
}

<强>更新：

从Angular Material v1.1.2中，选项 skipHide 已被 multiple 取代。

Answer 6

我只需要很少的努力和有点角色的黑客就可以使用它。

为了清楚起见，我使用的是Angular v1.5.3＆amp; Angular Material v1.0.6。

如果将skipHide: true添加到对话框定义对象中，则使用以前的版本，它将允许多个对话框。然后您的问题出现在取消按钮，该按钮将关闭错误的对话框。

解决方案是调用$mdDialog.cancel我们要调用$mdDialog.hide，因为它正确解析了右侧对话框。我们可以装饰$mdDialogProvider，而不是确保您已正确设置每个实例，甚至确保第三方库也遵循此模式，我们可以装饰$provide.decorator(name, decorator);。

<强> $ provide.decorator

angular.module('module').config(function($provide) {
    $provide.decorator('$mdDialog', function($delegate) {
        var methodHandle = $delegate.show;
        function decorateDialogShow() {
            var args = angular.extend({}, arguments[0], {
                skipHide: true
            });
            return methodHandle(args);
        }
        $delegate.show = decorateDialogShow;
        $delegate.cancel = function() {
            return $delegate.hide(null);
        }
        return $delegate;
    });
});
使用$ injector注册服务装饰器。服务装饰器拦截服务的创建，允许它覆盖或修改服务的行为。装饰器返回的对象可以是原始服务，也可以是替换或包装并委托给原始服务的新服务对象。

foreach (HtmlNode node in doc.SelectNodes("//*[@class='info']//a"))
                {
                    string value = node.InnerText;
                    Console.WriteLine(value);
                }

上面将简单地用现有的和工作的hide方法替换cancel方法。还设置全局默认值，以便最初在所有对话框中设置skipHide。

获胜者获胜者！

Answer 7

从Angular Material版本1.1.2上面：使用选项 multiple 。

为以前的版本使用选项 skipHide 。

实施例

$mdDialog.show({
    template: 'asdf'
    controller: "xyzController",
    multiple: true // Replace with "skipHide" on Angular Material 1.1.1 or before
})

Answer 8

skiphide 已被弃用。请改用多个键。请参阅文档here

这是一段代码片段

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

Answer 9

 $mdDialog.show({
     parent: angular.element(document.body),
     templateUrl: 'template.html',
     clickOutsideToClose: true,
     fullscreen: true,
     preserveScope: true,
     autoWrap: true,
     skipHide: true,
     controllerAs: 'customDialog',
     controller: function ($mdDialog) {
        this.callNewDialog = function (dialogCallback) {
            dialogCallback();
        };
      }});

在视野中呼叫：

ng-click="customDialog.callNewDialog(vm.addNewCustomer)"

和vm.addNewCustomer将是一个打开新对话框

的函数

Answer 10

是的，有可能，只需在你调用mdDialog时添加“skipHide：true”。就像：

$scope.xyz = function(anything) {
  $mdDialog.show({
    controller: "xyzController",
    skipHide: true,
    templateUrl: 'path-to-partial/xyzDialog.html',
    parent: angular.element(document.body),
    clickOutsideToClose: true
  })
}

Answer 11

实际上你可以使用mdPanels。小片段：

return $q(function(resolve, reject){
         $mdPanel.open(Object.assign({
            hasBackdrop: true,
            zIndex: 85, //greater than modal and lower than autocomplete\select
            locals: Object.assign({
                onClose: resolve
            }, locals),
            template: getCommonTemplate(template, heading),
            bindToController:true,
            controller: 'PanelDummyController as $ctrl',
            panelClass: 'rl-modal-panel',
            position: $mdPanel.newPanelPosition()
                .absolute()
                .center()
        }))


 });


controller('PanelDummyController', function (mdPanelRef) {
    'ngInject';

    const close = () => mdPanelRef.close().then(() => {
        this.onClose(Object.assign({}, this));
    });

    this.$mdDialog = {
        cancel: close,
        hide: close
    };
});

并为课程添加小样式。它不是模态的完全副本，但它是非常好的实现，可以改进以完全复制。

Answer 12

在最新的AngularJs材质对话框中，您可以找到以下解决方案： https://material.angularjs.org/latest/api/service/$mdDialog#multiple-dialogs

它使用多个对话框预设或配置。

Answer 13

绝对不可能。*现在。在某些情况下这是可以理解的，但也需要其他方式。因此，我倾向于使用自定义弹出对话框变量来实现相同的功能。否则，md-dialog会给工作带来痛苦。

是的我做到了但是如果需要3个嵌套，那么编写代码就可以了，但是另一个无法理解它。您可以通过提供范围和保留范围参数来完成工作，然后管理何时关闭以及下一个打开... brrrr ......

$ mdDialog堆叠/嵌套对话框，有可能吗？

13 个答案:

注意：这不再是正确答案，而是与答案时间段相对应，请查看以下内容以获取更多答案。