$ mdDialog dialogs empilés / imbriqués, Est-ce possible?
je veux ouvrir un $mdDialog sur l'autre. Si possible, avoir des dialogues se chevauchant illimités.
des idées?
12 réponses
Non, il n'est pas possible en ce moment d'avoir plusieurs $mdDialog. Honnêtement, j'ai vraiment besoin de cette fonctionnalité et il a essayé de le faire fonctionner, mais sans succès jusqu'à présent. Espérons qu'ils permettront cette fonctionnalité dans les prochaines versions.
bien qu'il y ait des discussions ici, vous pouvez trouver quelque chose d'utile.
Gabriel Anzaldo Alvarado a donné la bonne réponse à mon avis, la bonne réponse est partagée dans un Plunker lien. Mais comme demandé par de nombreux utilisateurs, je suis en train d'ajouter le code réel au cas où le lien serait indisponible dans le futur.
en gros, en ouvrant votre dialogue en utilisant le .show({}) fonction, Ajouter l'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
}
})
}
});
})();
le code ci-dessus a fonctionné m'.
comme L'a noté Vincenzo dans une autre réponse, tout en empilant des mdDialogs, les dialogues ci-dessous ne seront pas Gris-out, il y a un truc CSS pour résoudre cela:https://stackoverflow.com/a/38013682/366662
UPDATE
Cette réponse qui fonctionne pour la version 1.1.1, à partir de la version 1.1.2 le Matériel de l'équipe a changé la propriétéskipHidemultiple. Alors, faites attention quand vous copiez le morceau. Vérifier votre version matérielle et utilisez la bonne propriété en conséquence.
Ajouter skipHide: true à l'objet options de la deuxième boîte de dialogue.
Cela fonctionne pour moi: http://webiks.com/mddialog-with-a-confirmation-dialog/
Salut Les gars, voici une solution pour avoir des dialogues imbriqués: https://github.com/angular/material/issues/698
l'idée, c'est quand la seconde est ouverte enregistrer l'état de la première, et lorsque le second est fermé le lancement de la première boîte de dialogue nouveau.
comme L'a écrit Gabriel Anzaldo Alvarado dans le commentaire, c'est possible comme vous pouvez le voir sur ce plongeur: http://plnkr.co/edit/Ga027OYU5nrkua3JxNRy?p=preview
en plus, vous pouvez ajouter quelques classes css pour obtenir la même superposition de gris de fond: 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:
Angulaires Matériel v1.1.2 l'option skipHide a été remplacé par plusieurs.
j'ai obtenu que cela fonctionne avec très peu d'effort et un peu de piratage angulaire.
pour clarifier les choses, j'utilise le V1 angulaire.5.3 & Matériau angulaire v1.0.6.
Avec les versions précédentes si vous ajoutez skipHide: true à votre objet de définition de dialogue, il permettra des dialogues multiples. Votre problème arrive alors au bouton Annuler qui fermera la mauvaise boîte de dialogue.
La solution est plutôt appel de $mdDialog.cancel nous voulons appeler $mdDialog.hide comme il résout correctement le droit dialogue. Plutôt que de vous assurer que vous avez configuré chaque instance correctement, ou même s'assurer que les libs de tiers suivent aussi ce modèle, nous pouvons décorer le $mdDialogProvider.
$fournir.décorateur
$provide.decorator(name, decorator);enregistrez un décorateur de service avec l'injecteur$. Un service de décorateur intercepte la création d'un service, lui permettant de remplacer ou de modifier le comportement du service. L'objet renvoyé par le décorateur peut être le service d'origine, ou un nouvel objet de service qui remplace ou enveloppe et délègue au service original.
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;
});
});
ce qui précède remplacera simplement la méthode cancel, par la méthode existing and working hide. Définit également un défaut global de sorte que skipHide est défini initialement sur toutes les boîtes de dialogue.
Gagnant gagnant!
Angulaires Matériau de la version 1.1.2-ci: Utiliser l'option plusieurs.
utiliser l'option skipHide pour les versions précédentes.
Exemple
$mdDialog.show({
template: 'asdf'
controller: "xyzController",
multiple: true // Replace with "skipHide" on Angular Material 1.1.1 or before
})
skiphide a été désapprouvée. Utilisez plusieurs touche à la place. Voir la documentation ici
voici un extrait de code
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
}
})}
Oui c'est possible, il suffit d'ajouter "skipHide: true" où vous appelez mdDialog.. juste comme:
$scope.xyz = function(anything) {
$mdDialog.show({
controller: "xyzController",
skipHide: true,
templateUrl: 'path-to-partial/xyzDialog.html',
parent: angular.element(document.body),
clickOutsideToClose: true
})
} $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();
};
}});
appel en vue:
ng-click="customDialog.callNewDialog(vm.addNewCustomer)"
et vm.addNewCustomer sera une fonction qui ouvrira un nouveau dialogue
en fait, vous pouvez utiliser mdPanels. Petit extrait de code:
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
};
});
et ajouter un peu de style à la classe. Ce n'est pas tout à fait une copie de modal, mais c'est une assez bonne mise en œuvre et pourrait être améliorée pour copier entièrement.
Absolument pas possible.* pour l'instant. C'est compréhensible dans certaines situations, mais c'est aussi nécessaire dans d'autres. Donc, j'ai préféré utiliser des boîtes de dialogue popup personnalisées pour les mêmes fonctionnalités. Sinon md-dialog donne la douleur de faire le travail.
- Oui j'ai fait cela mais si 3 imbriqué nécessitait alors d'écrire du code ok mais un autre ne peut pas le comprendre. Vous pouvez faire le travail en donnant des paramètres scope et preservescope puis gérer quand fermer et qui ouvrir la prochaine ...brrrr...