Подтвердить что ты не робот

$ mdDialog сложенные/вложенные диалоги, возможно ли это?

Я хочу открыть один $mdDialog поверх другого. Если возможно, у вас есть неограниченные перекрывающиеся диалоги.

Любые идеи?

4b9b3361

ОТВЕТЫ

Ответ 1

Нет, сейчас невозможно иметь несколько $mdDialog. Честно говоря, мне действительно нужна эта функция, и я попробовал, чтобы она заработала, но пока безуспешно. Будем надеяться, что они позволят эту функцию в будущих выпусках.
Хотя есть обсуждение здесь, вы можете найти что - то полезное там.

ПРИМЕЧАНИЕ: это больше не правильный ответ, в отличие от периода времени, на который он был получен, ищите ответы ниже.

Ответ 2

Габриэль Анзалдо Альварадо дал правильный ответ, на мой взгляд, правильный ответ разделен на 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
        }
      })
    }
  });
})();

Этот код работал у меня.

Как отметил Винченцо в другом ответе, в то время как укладка mdDialogs, диалоги внизу не будут серыми, есть трюк CSS, который поможет решить эту проблему: fooobar.com/questions/230895/...

UPDATE

Этот ответ работает для версии 1.1.1, начиная с версии 1.1.2. Команда материалов изменила свойство от skipHide до multiple, Поэтому будьте осторожны при копировании фрагмента. Проверьте версию материала и соответствующим образом используйте соответствующее свойство.

Ответ 3

ОБНОВЛЕНИЕ: согласно @Magnus, это было обновлено к multiple начиная с v1.1.2

Добавьте skipHide: true ко второму объекту параметров диалога.

Это работает для меня: http://webiks.com/mddialog-with-a-confirmation-dialog/

Ответ 4

Привет, ребята, это временное решение для вложенных диалогов: https://github.com/angular/material/issues/698

Идея заключается в том, когда вторая открыта, сохраняя состояние первой, а когда вторая закрывается, снова запустите первое диалоговое окно.

Ответ 5

Как писал в комментарии Габриэль Анзалдо Альварадо, это возможно, как вы можете видеть на этом Plunker: 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;
}

UPDATE

Из Angular Материал v1.1.2 опция skipHide заменена несколькими.

Ответ 6

Я получил это, чтобы работать с очень небольшим усилием и небольшим взломом angular.

Чтобы все было ясно, я использую angular v1.5.3 и angular Материал v1.0.6.

С предыдущими версиями, если вы добавите skipHide: true в свой объект определения диалога, он позволит несколько диалогов. Затем ваша проблема переходит к кнопке отмены, которая закрывает неправильное диалоговое окно.

Решение скорее вызывает вызов $mdDialog.cancel, который мы хотим вызвать $mdDialog.hide, поскольку он правильно разрешает правильное диалоговое окно. Вместо того, чтобы убедиться, что вы правильно настроили каждый экземпляр или даже убедитесь, что сторонние библиотеки также следуют этому шаблону, мы можем украсить $mdDialogProvider.

$provide.decorator

$provide.decorator(name, 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;
    });
});

Вышеупомянутое просто заменит метод отмены с помощью существующего и рабочего метода hide. Также задает глобальное значение по умолчанию, так что skipHide устанавливается первоначально во всех диалоговых окнах.

Победитель-победитель!

Ответ 7

Из Angular Материал версии 1.1.2 a выше: используйте параметр multiple.

Используйте опцию skipHide для предыдущих версий.

Пример

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

Ответ 8

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

Ответ 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 будет функцией, открывающей новый диалог

Ответ 10

Да, возможно, просто добавьте "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
  })
}

Ответ 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
    };
});

и добавьте немного стиля в класс. Это не полная копия модального, но довольно неплохая реализация и может быть улучшена для полной копии.

Ответ 12

Абсолютно невозможно. * пока. Это понятно для некоторых ситуаций, но нужен и другой путь. Поэтому я предпочел использовать настраиваемые всплывающие диалоги для разных функций. В противном случае md-диалог дает боль для выполнения работы.

  • Да, я сделал это, но если 3 вложенных необходимо, но писать код нормально, а другой не может понять. Вы можете выполнить задание, указав параметры области и сохранения, а затем управляйте, когда закрыть, а затем открыть следующий... brrrr...