3

Angular Material UI フレームワークを使用した AngularJS アプリがあります。

アプリにはダイアログを表示するさまざまなメカニズム (エラーや読み込みスピナーなど) があり、特定のシナリオで特に選択されたものだけを閉じることが望ましいでしょう。フェッチの結果である可能性のあるエラー ダイアログ。

私がドキュメントとコードで見つけることができるものは一致しません (ただし、コードは議論に勝つはずです):

  • ドキュメントには、オプションの応答で、最新のもののみを閉じることができると書かれています
  • コードは、オプションの理由で、最新、最新の数、またはすべてのオープンを閉じることができることを示しています
  • ドキュメントの例では、特定のダイアログを閉じることができ、その方法または理由を示すフラグが表示されます

私は可能な限り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");
}

編集:
コードが常に何が起こるかについての議論に勝つことは知っていますが、それが私が見ている正しいコードであるかどうかは完全にはわかりませんでした.
より良いテストを行い、ポイントと問題を説明するために、例を更新しました。これは、コードが言ったように動作することを示しています。

私が本当に探しているのは、私がまだ思いもよらなかった方法で目標を達成できるかどうかです。

4

2 に答える 2

4

$mdPanel代わりに使用$mdDialogすると、目的の効果が得られました。変更を反映するためにデモをフォークしました。これらはハイライトです。

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;
    }
}
于 2016-09-30T12:20:11.670 に答える
2

同時に 2 つ以上のダイアログを表示することは理想的ではなく、おそらく Google マテリアル デザインでは推奨されていないことをお勧めします。

ドキュメントから引用するには

ダイアログは中断を伴うため、控えめに使用してください。

あなたは言う：

AJAX リクエストがデータのフェッチを終了したら、ロード スピナーを閉じたいのですが、フェッチの結果である可能性のあるエラー ダイアログは閉じません。

ここでの私の解決策は、最初にスピナーを表示するダイアログを 1 つ持つことです。リクエストが終了したら、スピナーを任意のメッセージに置き換えます。

于 2016-09-02T12:29:20.413 に答える