มีคู่ของปพลิเคชันที่ทำ $http.get() โทรศัพท์และต้องสามารถแสดงข้อความข้อผิดพลาดรูปแบบอย่าง มีรายละเอียดข้อผิดพลาดที่น่าเกลียดที่ซ่อนอยู่, แต่สามารถเข้าถึง  โดยทั่ว, นี้:

แล้วถ้าผู้ใช้คลิกที่ข้อผิดพลาด, พวกเขาดูรายละเอียดเพิ่มเติม:

สิ่งที่ง่าย  เนื่องจากปรากฏแน่นอนเดียวกันอาจเกิดข้อผิดพลาดในหน้าจอการจัดการหน้าจอของผู้ใช้, มันเรียกว่าชัดเจนสำหรับคำสั่งแองกูลาร์แบบกำหนดเอง  ฉัน  พบ ชุดดีเด่น ของบทความ (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) โดยมหาราช Dan Wahlin.  ตามคำแนะนำของเขา, ได้อย่างรวดเร็วสร้างการ <-สาร> ไดเรกทีฟ และย้ายระบบ squeegee แสดงข้อผิดพลาดของฉันขึ้น. ฉันวิ่งลงในบิตของปัญหาด้วยคำสั่งนี้ซับซ้อนมากขึ้น  อย่างมีความสุข, เรียงลำดับของโดยบังเอิญ, ผมได้บอก WebStorm (แก้ไขใช้วันนี้) ว่า ไฟล์ JS แฟ้มเป็นแองกูลาร์ และมันช่วยให้ฉันเข้าใจปัญหา  เป็นรหัสสำหรับคำสั่งตัวเอง:

angular.module("CDLApp").คำสั่ง("generalCdlErrorHandler", ฟังก์ชัน() {

    เที่ยวกลับ {
        จำกัด: "E",
        แทน: จริง,

        ขอบเขต: {
            retrieveLastConfigurationError: "&"
        },

        แม่แบบ:
          '<คลาส div = "เตือนเตือนอันตราย" บทบาท = "การแจ้งเตือน" เริ่ม ng = " doShowExpandedErrorDetails = true" ดู ng = "retrieveLastConfigurationError()">' +
          ' มีข้อผิดพลาด I/O หรือข้อผิดพลาดอื่น ๆ.  นี้มักจะเกิดขึ้นได้เนื่องจากไม่พบแฟ้มข้อมูลการกำหนดค่า ' +
          ' พบ หรือแฟ้มการกำหนดค่าที่ประกอบด้วยข้อมูลที่ไม่ถูกต้อง (เช่นการอ้างอิงไลบรารีเอกสาร ' +
          ' ที่มีอยู่).' +
          '  <br />' +
          '  <div แสดง ng = "doShowExpandedErrorDetails">' +
          '    <การ href = "#" คลิก ng = " doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          'คลิกที่นี่เมื่อต้องการซ่อนรายละเอียด' +
          '    </การ>: ' +
          '    <br />' +
          '    <ก่อน>{{retrieveLastConfigurationError() | เจซัน}}</ก่อน>' +
          '    <br />' +
          '  </div>' +
          '  <div แสดง ng = "!doShowExpandedErrorDetails">' +
          '    <การ href = "#" คลิก ng = " doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          'คลิกที่นี่เพื่อขยายรายละเอียดข้อผิดพลาด' +
          '    </การ>' +
          '  </div>' +
          '</div>'
    };
});

โดยทั่ว, ฉันกำลังสร้างองค์ประกอบใหม่เรียกว่า "generalCdlErrorHandler"  ต้องการเข้าถึงฟังก์ชันเรียกว่า retrieveLastConfigurationError และที่จัดการในขอบเขตวัตถุ  ฉันคงไม่ได้เพียงใช้ขอบเขตของหลัก, แต่ที่รู้สึกขี้เกียจ  ถ้าใครคิดว่า ผมควรทำที่, ฉันชอบที่จะได้ยินเกี่ยวกับข้อคิดเห็น.

นี้ได้สะดวก, แต่ไม่ได้รับอะไร  ข้อผิดพลาดไม่มี popped ขึ้นในคอนโซล (ที่อย่างน้อย ฉันคงพลาด sx ทั้งหมดที่สร้างตามแบบ).  ผมก็ไม่ได้รับผลลัพธ์จากคำสั่ง  ฉันไป และเพิ่มการคงข้อความก่อนคำสั่งแสดง ng และ * ไม่ * ได้ที่. นี้ทำให้ฉันคิดว่า บางทีคำสั่งไม่อนุญาตให้สร้าง vars ใหม่เช่น "doShowExpandedErrorDetails" หรือมีการ "ng เริ่ม" นัยมี 

ฉันก็กลับเป็น HTML เมื่อต้องการดูถ้าผม ชนิดหนึ่งและเวลานี้ WebStorm ช่วยออก  ฉันได้ผ่านในฟังก์ชัน retrieveLastConfigurationError นี้:

<ทั่วไป-cdl-ข้อผิดพลาดจัดการ retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</ทั่วไป-cdl-ข้อผิดพลาดจัดการ>

แต่มันจำเป็นนี้:

<ทั่วไป-cdl-ข้อผิดพลาดจัดการดึงสุดท้ายฟิกข้อผิดพลาด = "CDLController.retrieveLastConfigurationError()">
</ทั่วไป-cdl-ข้อผิดพลาดจัดการ>

WebStorm ฉลาดพอที่จะรู้ว่า มันได้ถูกเชื่อมต่อได้  ถ้ามันไม่ได้ให้คำแนะนำที่, ฉันจะอาจจะยังแก้ปัญหานี้ .  เวลาสนุก!

นี่คือเคล็ดลับ: ไม่เพียงแต่ เป็นชื่อองค์ประกอบไดเรกทีฟเชื่อมต่อ, เพื่อให้ มีแอตทริบิวต์ใด ๆ ที่คุณเพิ่มเข้าไป  เมื่อเพิ่มการยัติภังค์, ทั้งหมดทำงานมากขึ้น  ของด่านกวดวิชาเกิดขึ้นจะ ใช้ชื่อย่อเดียว, ดังนั้นฉันไม่ได้ทำการเชื่อมต่อ.

หวังนี้ช่วยคน.

</สิ้นสุด>

สมัครสมาชิกไปยังบล็อกของฉัน.

ทำตามฉันใน Twitter ที่ http://www.twitter.com/pagalvin