Menggunakan Angular Material, apakah mungkin untuk menutup dialog tertentu

Saya memiliki aplikasi AngularJS menggunakan kerangka Angular Material UI.

Aplikasi ini memiliki mekanisme berbeda yang menampilkan dialog (misalnya kesalahan dan memuat spinner) dan akan lebih baik jika hanya menutup dialog yang dipilih secara khusus dalam skenario tertentu, misalnya. ketika permintaan AJAX selesai mengambil data, saya ingin pemintal pemuatan saya ditutup, tetapi tidak ada dialog kesalahan apa pun yang mungkin disebabkan oleh pengambilan tersebut.

Apa yang saya temukan dalam dokumentasi dan kode tidak sesuai (walaupun kode harus memenangkan argumen):

  • Dokumentasi menyatakan hanya yang terbaru yang dapat ditutup, dengan respons opsional
  • Kode mengatakan yang terbaru, sejumlah yang terbaru atau semua yang terbuka dapat ditutup, dengan alasan opsional
  • Contoh di dokumentasi mengatakan dialog tertentu dapat ditutup, dengan tanda yang menunjukkan bagaimana atau mengapa

Saya telah membuat demo niat saya, sebagai MCV sebanyak mungkin – berikut adalah hal-hal penting:

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");
}

EDIT:
Saya tahu kode tersebut selalu memenangkan argumen tentang apa yang terjadi, namun saya tidak sepenuhnya yakin itu adalah kode yang tepat yang saya lihat.
Saya telah memperbarui contohnya menjadi tes yang lebih baik dan ilustrasikan poin dan masalah saya. Ini menunjukkan segala sesuatunya berfungsi seperti yang dikatakan kode.

Yang sebenarnya saya cari adalah apakah masih mungkin mencapai tujuan saya dengan cara lain yang belum terpikirkan oleh saya.


angularjs angular-material mddialog
person Flygenring    schedule 02.09.2016    source sumber
comment
Mungkin dokumentasinya salah atau terlalu lama. Dokumentasi dapat menyatakan apa pun yang penulis inginkan. Jika kodenya mengatakan tidak mungkin, maka sebenarnya tidak mungkin. Saya minta maaf.   -  person RicoBrassers    schedule 02.09.2016
comment
Saya tahu kode itu yang penting, tapi saya tidak sepenuhnya yakin itu kode yang benar yang saya lihat. Meskipun demikian, contoh yang saya buat menunjukkan segala sesuatunya berfungsi seperti yang dikatakan kode, tetapi masih mungkin untuk mencapai tujuan saya dengan cara lain yang belum terpikirkan oleh saya.   -  person Flygenring    schedule 02.09.2016

Jawaban (2)


arrow_upward
4
arrow_downward

Menggunakan $mdPanel alih-alih $mdDialog Saya dapat mencapai efek yang diinginkan; Saya membagi demo saya untuk mencerminkan perubahan – berikut adalah hal-hal penting:

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;
    }
}
person Flygenring    schedule 30.09.2016

arrow_upward
2
arrow_downward

Saya menyarankan melakukan dua dialog atau lebih pada saat yang sama tidaklah ideal dan mungkin tidak direkomendasikan oleh desain Material Google.

Mengutip dari dokumen

Gunakan dialog dengan hemat karena mengganggu.

Kamu bilang:

ketika permintaan AJAX selesai mengambil data, saya ingin pemintal pemuatan saya ditutup, tetapi tidak ada dialog kesalahan apa pun yang mungkin disebabkan oleh pengambilan tersebut.

Solusi saya di sini adalah memiliki satu dialog yang awalnya menampilkan spinner. Setelah permintaan selesai, ganti spinner dengan pesan apa pun.

person camden_kid    schedule 02.09.2016
comment
Saya setuju bahwa tidak boleh ada terlalu banyak dialog dan dialog tersebut dibuat untuk ditumpuk dalam kerangka kerja, jadi pada tingkat tertentu tidak masalah. Alasan saya melakukannya adalah untuk memberi tahu pengguna tentang kesalahan yang akan mengganggu pekerjaan mereka dan (seperti yang diminta secara khusus) memblokir semua interaksi saat memuat data (yaitu menyimpan formulir yang panjang) sehingga pengguna mengetahui hal-hal sedang terjadi tetapi tidak dapat mengacaukannya untuk sementara waktu. . - person Flygenring; 02.09.2016
comment
@Flygenring Apakah Anda yakin tidak dapat mencapai semua itu dengan satu dialog? :-) - person camden_kid; 02.09.2016
comment
Saya mungkin bisa, tapi itu memerlukan restrukturisasi keseluruhan sistem karena penanganan kesalahan (termasuk dialog) ditangani secara terpusat dengan menghubungkan ke penanganan pengecualian bawaan dan pemuatan diterapkan langsung pada tindakan tertentu. Namun sarannya sangat sangat dihargai! :-) - person Flygenring; 02.09.2016
comment
Apakah itu solusi optimal atau pilihan untuk masalah saya atau tidak, saya menemukan cara untuk melakukannya menggunakan kerangka materi dengan cara yang dimaksudkan, ditunjukkan oleh jawaban saya :-) - person Flygenring; 30.09.2016
comment
Saya sedang mengembangkan aplikasi waktu nyata dengan koneksi soket web yang kehilangan koneksi saat Anda kehilangan wifi atau mencabut kabel ethernet. Dalam hal ini saya ingin menampilkan dialog hamparan yang tidak dapat ditutup dengan latar belakang bertuliskan Terputus. Mencoba menyambung kembali..., karena UI tidak akan interaktif tanpa koneksi. Saya mungkin sudah menampilkan beberapa dialog lain ketika ini terjadi, dan saya tidak ingin dialog itu ditutup karena saya ingin pengguna dapat melanjutkan pekerjaannya ketika koneksi kembali. Ini adalah contoh kasus yang bagus di mana Anda akhirnya harus mendukung banyak dialog secara bersamaan. - person Sammi; 14.01.2019