$ mdDialog堆叠/嵌套对话框,有可能吗?

angularjs angular-material

15555 观看

13回复

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

有任何想法吗?

作者: Andrey 的来源 发布者: 2019 年 5 月 29 日

回应 (13)


18

决定

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

注意:这不再是正确的答案,而不是答案的时间段,请查看下面的更多答案。

作者: Salal Aslam 发布者: 09.06.2015 05:53

21

Gabriel Anzaldo Alvarado在我看来给出了正确的答案,正确的答案在Plunker链接中分享。但是,正如许多用户所要求的那样,我正在添加实际代码以防将来链接变得不可用。

基本上,在使用该.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

UPDATE

这个答案适用于1.1.1版本,从1.1.2版本的材质队更改的属性skipHidemultiple。因此,在复制粘贴代码段时要小心。检查您的材料版本并相应地使用正确的属性。

作者: Dorival 发布者: 12.08.2016 08:55

19

更新:根据@Magnus,它已更新multiple为v1.1.2


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

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

作者: Vinod Patil 发布者: 05.07.2016 08:59

6

嗨,大家好,这是一个有嵌套对话框的解决方法:https//github.com/angular/material/issues/698

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

作者: gabrielAnzaldo 发布者: 18.09.2015 11:27

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已被多个替换。

作者: Vincenzo 发布者: 24.06.2016 12:39

3

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

为了清楚起见,我使用的是Angular v1.5.3和Angular Material v1.0.6。

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

解决方案是调用$mdDialog.cancel我们要调用$mdDialog.hide它,因为它正确解析了正确的对话框。而不是确保你已正确设置每个实例,甚至确保第三方库也遵循这种模式,我们可以装饰$mdDialogProvider

$ provide.decorator

$provide.decorator(name, decorator);

使用$ injector注册服务装饰器。服务装饰器拦截服务的创建,允许它覆盖或修改服务的行为。装饰器返回的对象可以是原始服务,也可以是替换或包装并委托给原始服务的新服务对象。

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;
    });
});

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

获胜者!

作者: Shannon Hochkins 发布者: 03.08.2016 02:40

3

从Angular Material版本1.1.2上面:使用选项倍数

对于以前的版本,请使用选项skipHide

$mdDialog.show({
    template: 'asdf'
    controller: "xyzController",
    multiple: true // Replace with "skipHide" on Angular Material 1.1.1 or before
})
作者: HoffZ 发布者: 15.02.2017 01:23

3

skiphide已被弃用。请改用多个密钥。请参阅此处的文档

这是一段代码片段

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
            }
        })}
作者: Bob Sheehan 发布者: 29.06.2017 09:54

2

是的,这是可能的,只需添加“skipHide:true”,你可以调用mdDialog ..就像:

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

作者: Abhishek Kumar Singh 发布者: 02.02.2017 10:41

2

 $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将打开新的对话框功能

作者: Hubert Pietruczuk 发布者: 21.09.2016 11:56

0

实际上你可以使用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
    };
});

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

作者: Valery Kozlov 发布者: 30.09.2016 06:27

0

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

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

作者: Patrik Laszlo 发布者: 13.02.2019 12:59

-3

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

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