使用 Angular Material,是否可以关闭特定对话框
Using Angular Material, is it possible to close a specific dialog
我有一个使用 Angular Material UI 框架的 AngularJS 应用程序。
该应用程序有不同的机制来显示对话框(例如错误和加载微调器),最好只关闭在某些情况下特别选择的一个,例如当 AJAX 请求完成获取数据时,我希望我的加载微调器关闭,但不希望关闭任何可能是获取结果的错误对话框。
我在文档和代码中找到的内容不一致(尽管代码应该赢得争论):
- Documentation表示只能关闭最新的,有可选的回复
- The code表示最新,可关闭多个最新或全部打开,可选原因
- Example in the documentation 表示可以关闭一个特定的对话框,并带有一个标志,表示如何或为什么
我已经尽可能 demo of my intent, as MCV – 这些是亮点:
var dialog = {},
promise = {};
function showDialogs(sourceEvent) {
showDialog(sourceEvent, "one");
showDialog(sourceEvent, "two");
}
function showDialog(sourceEvent, id) {
dialog[id] = $mdDialog.alert({...});
promise[id] = $mdDialog.show(dialog[id]);
promise[id].finally(function() {
dialog[id] = undefined;
});
}
function closeDialogs() {
$mdDialog.hide("Closed all for a reason", {closeAll: true});
}
function closeDialogLatest() {
$mdDialog.hide("Closed from the outside");
}
function closeDialogReason() {
$mdDialog.hide("Closed with a reason");
}
function closeDialogSpecific(id) {
$mdDialog.hide(dialog[id], "finished");
}
编辑:
我知道代码总是会赢得关于发生的事情的争论,但我不完全确定它是我正在查看的正确代码。
我更新了示例以更好地测试和说明我的观点和问题。这显示了代码所说的工作。
我真正在寻找的是是否还有可能以我尚未想到的其他方式实现我的目标。
我建议同时打开两个或多个对话框并不理想,Google Material 设计可能不推荐。
引用自docs
Use dialogs sparingly because they are interruptive.
你说:
when an AJAX request is finished fetching data, I would like my
loading spinner to close, but not any error dialog that may be the
result of the fetching.
我的解决方案是设置一个最初显示微调器的对话框。请求完成后,用任何消息替换微调器。
使用 $mdPanel
instead of $mdDialog
I was able to achieve the desired effect; I forked my demo 反映变化 – 这些是亮点:
var dialog = {};
function showDialogs() {
showDialog("one");
showDialog("two");
}
function showDialog(id) {
var config = {...};
$mdPanel.open(config)
.then(function(panelRef) {
dialog[id] = panelRef;
});
}
function closeDialogs() {
var id;
for(id in dialog) {
closeDialogSpecific(id, "Closed all for a reason");
}
}
function closeDialogSpecific(id, reason) {
var message = reason || "finished: " + id;
if(!dialog.hasOwnProperty(id) || !angular.isObject(dialog[id])) {
return;
}
if(dialog[id] && dialog[id].close) {
dialog[id].close()
.then(function() {
vm.feedback = message;
});
dialog[id] = undefined;
}
}
我有一个使用 Angular Material UI 框架的 AngularJS 应用程序。
该应用程序有不同的机制来显示对话框(例如错误和加载微调器),最好只关闭在某些情况下特别选择的一个,例如当 AJAX 请求完成获取数据时,我希望我的加载微调器关闭,但不希望关闭任何可能是获取结果的错误对话框。
我在文档和代码中找到的内容不一致(尽管代码应该赢得争论):
- Documentation表示只能关闭最新的,有可选的回复
- The code表示最新,可关闭多个最新或全部打开,可选原因
- Example in the documentation 表示可以关闭一个特定的对话框,并带有一个标志,表示如何或为什么
我已经尽可能 demo of my intent, as MCV – 这些是亮点:
var dialog = {},
promise = {};
function showDialogs(sourceEvent) {
showDialog(sourceEvent, "one");
showDialog(sourceEvent, "two");
}
function showDialog(sourceEvent, id) {
dialog[id] = $mdDialog.alert({...});
promise[id] = $mdDialog.show(dialog[id]);
promise[id].finally(function() {
dialog[id] = undefined;
});
}
function closeDialogs() {
$mdDialog.hide("Closed all for a reason", {closeAll: true});
}
function closeDialogLatest() {
$mdDialog.hide("Closed from the outside");
}
function closeDialogReason() {
$mdDialog.hide("Closed with a reason");
}
function closeDialogSpecific(id) {
$mdDialog.hide(dialog[id], "finished");
}
编辑:
我知道代码总是会赢得关于发生的事情的争论,但我不完全确定它是我正在查看的正确代码。
我更新了示例以更好地测试和说明我的观点和问题。这显示了代码所说的工作。
我真正在寻找的是是否还有可能以我尚未想到的其他方式实现我的目标。
我建议同时打开两个或多个对话框并不理想,Google Material 设计可能不推荐。
引用自docs
Use dialogs sparingly because they are interruptive.
你说:
when an AJAX request is finished fetching data, I would like my loading spinner to close, but not any error dialog that may be the result of the fetching.
我的解决方案是设置一个最初显示微调器的对话框。请求完成后,用任何消息替换微调器。
使用 $mdPanel
instead of $mdDialog
I was able to achieve the desired effect; I forked my demo 反映变化 – 这些是亮点:
var dialog = {};
function showDialogs() {
showDialog("one");
showDialog("two");
}
function showDialog(id) {
var config = {...};
$mdPanel.open(config)
.then(function(panelRef) {
dialog[id] = panelRef;
});
}
function closeDialogs() {
var id;
for(id in dialog) {
closeDialogSpecific(id, "Closed all for a reason");
}
}
function closeDialogSpecific(id, reason) {
var message = reason || "finished: " + id;
if(!dialog.hasOwnProperty(id) || !angular.isObject(dialog[id])) {
return;
}
if(dialog[id] && dialog[id].close) {
dialog[id].close()
.then(function() {
vm.feedback = message;
});
dialog[id] = undefined;
}
}