And*_*rey 27 angularjs angular-material
我想在另一个$mdDialog上面打开一个.如果可能,请使用无限重叠对话框.
有任何想法吗？
Dor*_*val 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版本的材质队更改的属性从skipHide到multiple.因此,在复制粘贴代码段时要小心.检查您的材料版本并相应地使用正确的属性.
小智 19
更新:根据@Magnus,它已更新multiple为v1.1.2
添加skipHide: true到第二个对话框的选项对象.
这对我有用:http://webiks.com/mddialog-with-a-confirmation-dialog/
Sal*_*lam 18
不,现在不可能拥有多个$mdDialog.老实说,我真的需要这个功能并试图让它工作但到目前为止没有成功.让我们希望他们在将来的版本中允许这个功能.
虽然讨论在这里,你可以找到一些有用的存在.
嗨,大家好,这是一个有嵌套对话框的解决方法:https://github.com/angular/material/issues/698
这个想法是当第二个打开时保存第一个状态,当第二个关闭时再次启动第一个对话框.
正如加布里埃尔·安扎尔多·阿尔瓦拉多在评论中所写的那样,你可以在这个普通人身上看到: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已被多个替换.
小智 5
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
}
})}
| 归档时间： |
|
| 查看次数： |
17611 次 |
| 最近记录： |