我有一个使用Angular Material UI框架的AngularJS应用程序。
app具有显示对话框的不同机制(例如错误和加载微调器),并且最好只关闭在某些情况下特别选择的一个,例如,当一个AJAX请求完成获取数据时,我希望我的加载微调器关闭,但不是任何可能是获取结果的错误对话框。
我在文档和代码中找到的内容并不一致(尽管代码应该赢得参数):
我做了demo of my intent,尽可能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");
}
修改
我知道代码总能赢得关于会发生什么的争论,但我并不完全确定这是我正在看的正确代码。
我更新了示例以更好地测试和说明我的观点和问题。这显示了代码所说的工作。
我真正想要的是,是否仍有可能以其他方式实现我的目标,而我还没想到。
答案 0 :(得分:4)
使用$mdPanel
代替$mdDialog
我能够达到预期的效果;我分叉了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;
}
}
答案 1 :(得分:2)
我建议同时进行两个或两个以上的对话并不理想,Google Material设计可能不推荐这样做。
引用docs
谨慎使用对话框,因为它们是中断的。
你说:
当AJAX请求完成获取数据时,我想要我的 加载微调器关闭,但不是任何可能的错误对话框 取得的结果。
我的解决方案是有一个对话框,最初显示微调器。请求完成后,用任何消息替换微调器。