การใช้ Angular Material เป็นไปได้หรือไม่ที่จะปิดกล่องโต้ตอบเฉพาะ

ฉันมีแอป AngularJS โดยใช้เฟรมเวิร์ก Angular Material UI

แอปมีกลไกที่แตกต่างกันที่แสดงกล่องโต้ตอบ (เช่น ข้อผิดพลาดและตัวหมุนโหลด) และควรปิดเฉพาะกลไกที่เลือกไว้โดยเฉพาะในบางสถานการณ์ เช่น เมื่อคำขอ AJAX ดึงข้อมูลเสร็จแล้ว ฉันต้องการให้ตัวหมุนโหลดของฉันปิด แต่ไม่มีกล่องโต้ตอบข้อผิดพลาดใด ๆ ที่อาจเป็นผลมาจากการดึงข้อมูล

สิ่งที่ฉันพบในเอกสารและรหัสไม่สอดคล้องกัน (แม้ว่ารหัสควรจะชนะการโต้แย้ง):

  • เอกสารประกอบบอกว่าปิดได้เฉพาะข้อมูลล่าสุดเท่านั้น โดยมี การตอบสนองที่เป็นทางเลือก
  • รหัส บอกว่าล่าสุด จำนวนล่าสุดหรือเปิดทั้งหมดสามารถปิดได้ โดยมีเหตุผลเพิ่มเติม
  • ตัวอย่างใน เอกสารประกอบระบุว่าสามารถปิดกล่องโต้ตอบเฉพาะได้ โดยมีธงที่ระบุว่าอย่างไรหรือเพราะเหตุใด

ฉันได้สร้างสาธิตความตั้งใจของฉัน เป็น 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");
}

แก้ไข:
ฉันรู้ว่าโค้ดมักจะชนะการโต้แย้งเกี่ยวกับสิ่งที่เกิดขึ้น แต่ฉันไม่แน่ใจทั้งหมดว่าเป็นโค้ดที่ถูกต้องที่ฉันกำลังดูอยู่
ฉันได้อัปเดตตัวอย่างเป็น ทดสอบและอธิบายประเด็นและปัญหาของฉันได้ดีขึ้น นี่แสดงสิ่งต่าง ๆ ที่ทำงานตามที่โค้ดกล่าว

สิ่งที่ฉันกำลังมองหาจริงๆ ก็คือ จะสามารถบรรลุเป้าหมายของฉันด้วยวิธีอื่นที่ฉันคิดไม่ถึงได้หรือไม่


angularjs angular-material mddialog
person Flygenring    schedule 02.09.2016    source แหล่งที่มา
comment
อาจเป็นไปได้ว่าเอกสารไม่ถูกต้องหรือเก่าเกินไป เอกสารสามารถระบุสิ่งที่ผู้เขียนต้องการได้ ถ้าโค้ดบอกว่าเป็นไปไม่ได้ แสดงว่าเป็นไปไม่ได้จริงๆ ฉันเสียใจ.   -  person RicoBrassers    schedule 02.09.2016
comment
ฉันรู้ว่าโค้ดเป็นสิ่งสำคัญ แต่ฉันไม่แน่ใจว่ามันเป็นโค้ดที่ถูกต้องที่ฉันกำลังดูอยู่ ที่กล่าวว่าตัวอย่างที่ฉันทำแสดงให้เห็นว่าสิ่งต่าง ๆ ทำงานตามที่โค้ดกล่าว แต่ก็ยังอาจเป็นไปได้ที่จะบรรลุเป้าหมายของฉันด้วยวิธีอื่นที่ฉันยังไม่ได้คิด   -  person Flygenring    schedule 02.09.2016

คำตอบ (2)


arrow_upward
4
arrow_downward

ใช้ $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;
    }
}
person Flygenring    schedule 30.09.2016

arrow_upward
2
arrow_downward

ฉันขอแนะนำให้มีกล่องโต้ตอบสองรายการขึ้นไปในเวลาเดียวกันนั้นไม่เหมาะและอาจไม่แนะนำโดย Google Material Design

หากต้องการอ้างอิงจากเอกสาร

ใช้กล่องโต้ตอบเท่าที่จำเป็นเพราะเป็นการรบกวน

คุณพูด:

เมื่อคำขอ AJAX ดึงข้อมูลเสร็จแล้ว ฉันต้องการให้ตัวหมุนโหลดของฉันปิด แต่ไม่มีกล่องโต้ตอบข้อผิดพลาดใด ๆ ที่อาจเป็นผลมาจากการดึงข้อมูล

วิธีแก้ปัญหาของฉันที่นี่คือให้มีกล่องโต้ตอบหนึ่งอันซึ่งเริ่มแรกจะแสดงสปินเนอร์ เมื่อคำขอเสร็จสิ้น ให้แทนที่สปินเนอร์ด้วยข้อความใดๆ

person camden_kid    schedule 02.09.2016
comment
ฉันยอมรับว่าไม่ควรมีกล่องโต้ตอบมากเกินไป และสร้างขึ้นเพื่อซ้อนกันในกรอบงาน ดังนั้นจึงเป็นเรื่องปกติในระดับหนึ่ง เหตุผลที่ฉันทำคือการแจ้งให้ผู้ใช้ทราบถึงข้อผิดพลาดที่จะรบกวนการทำงานของพวกเขา และ (ตามที่ร้องขอโดยเฉพาะ) บล็อกการโต้ตอบทั้งหมดในขณะที่โหลดข้อมูล (เช่น การบันทึกรูปแบบยาว) เพื่อให้ผู้ใช้รู้ว่าสิ่งต่าง ๆ เกิดขึ้น แต่ไม่สามารถทำให้เกิดปัญหาได้ในระหว่างนี้ . - person Flygenring; 02.09.2016
comment
@Flygenring คุณแน่ใจหรือไม่ว่าคุณไม่สามารถทำทุกสิ่งให้สำเร็จได้ด้วยกล่องโต้ตอบเดียว :-) - person camden_kid; 02.09.2016
comment
ฉันอาจทำได้ แต่จะต้องมีการปรับโครงสร้างใหม่ทั้งระบบเนื่องจากการจัดการข้อผิดพลาด (รวมถึงกล่องโต้ตอบ) ได้รับการจัดการจากส่วนกลางโดยการเชื่อมต่อกับการจัดการข้อยกเว้นในตัวและการโหลดจะถูกนำไปใช้กับการกระทำบางอย่างโดยตรง แต่ข้อเสนอแนะนั้นได้รับการชื่นชมอย่างมาก! :-) - person Flygenring; 02.09.2016
comment
ไม่ว่าจะเป็นวิธีแก้ปัญหาที่ดีที่สุดหรือเป็นที่ต้องการสำหรับปัญหาของฉันหรือไม่ ฉันพบวิธีดำเนินการโดยใช้กรอบงานวัสดุในวิธีที่ตั้งใจไว้ ซึ่งแสดงให้เห็นโดยคำตอบของฉัน :-) - person Flygenring; 30.09.2016
comment
ฉันกำลังพัฒนาแอปแบบเรียลไทม์ด้วยการเชื่อมต่อ websocket ที่จะขาดการเชื่อมต่อเมื่อคุณสูญเสีย wifi หรือถอดปลั๊กสายอีเธอร์เน็ต ในกรณีนั้น ฉันต้องการแสดงกล่องโต้ตอบการซ้อนทับที่ไม่สามารถปิดได้ โดยมีฉากหลังว่า Disconnected กำลังพยายามเชื่อมต่อใหม่... เนื่องจาก UI จะไม่โต้ตอบหากไม่มีการเชื่อมต่อ ฉันอาจแสดงกล่องโต้ตอบอื่นอยู่แล้วเมื่อเกิดเหตุการณ์นี้ และฉันไม่ต้องการปิดสิ่งนั้นเพราะฉันต้องการให้ผู้ใช้สามารถทำงานต่อได้เมื่อมีการเชื่อมต่อกลับมา นี่เป็นกรณีตัวอย่างที่ดีที่คุณอาจต้องรองรับหลายกล่องโต้ตอบพร้อมกัน - person Sammi; 14.01.2019