עצה וגישה לפתרון בעיות עבור הוראות זוויתי (או, לומד לאהוב מקפים בכל מקום שוב)

יש לי כמה אפליקציות $http.get להפוך() קורא, ואני רוצה להיות מסוגל להציג הודעת שגיאה מעוצבת יפה עם פרטי שגיאה מכוער מוסתר, אבל נגיש.  בעיקרון, זה:

image

ולאחר מכן, אם המשתמש לוחץ על השגיאה, הם ראו מידע נוסף:

image

. דברים פשוטים  מאז אותה שגיאה פוטנציאלית המדויק יכולים להופיע המסך ניהולית, כמו גם את המסך משתמש הקצה, זה בבירור קרא הוראה זוויתי מותאם אישית.  אני  . מצאתי את זה הסדרה יוצאת מן הכלל מאמרים (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) מאת הגדול דן Wahlin.  בעקבות עצתו, יצרתי מהר מאוד <שלום-עולם> הוראת, עבר שלי מגב להציג שגיאה מורכבים יותר. נתקלתי קצת בצרות עם הוראה זו מורכבת יותר.  באושר, סוג של מקרה, אמרתי WebStorm (העורך שלהשתמש בימים אלה) כי קובץ JS קובץ זוויתי, זה עזר לי להבין את הנושא.  . זה הקוד עבור ההנחיה עצמה:

angular.module("CDLApp").הוראה("generalCdlErrorHandler", פונקציה() {

החזרה {
להגביל: "E",
החלף: נכון,

היקף: {
retrieveLastConfigurationError: "&"
},

תבנית:
'<div class = "התראה התראה-סכנה" תפקיד = "התראה" ng-init = "doShowExpandedErrorDetails = true" ng-שואו = "retrieveLastConfigurationError()">' +
"היה שם שגיאת קלט/פלט או בשגיאה אחרת. זה בדרך כלל קורה כי קובץ נתוני תצורה לא יכול להיות " +
"מצא או בתצורת הקובץ מכיל מידע לא מדויק (כגון הפנייה ספריית מסמכים ' +
' שאינו קיים).' +
' <br />' +
' <תוכנית-ng div = "doShowExpandedErrorDetails">' +
' <href = "#" ng-לחץ = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
'לחץ כאן כדי להסתיר פרטים'. +
' </של>: ' +
' <br />' +
' <טרום>{{retrieveLastConfigurationError() | json}}</טרום>' +
' <br />' +
' </div>' +
' <תוכנית-ng div = "!doShowExpandedErrorDetails">' +
' <href = "#" ng-לחץ = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
'לחץ כאן כדי להרחיב את פרטי שגיאה'. +
' </של>' +
' </div>' +
'</div>'
};
});

בעיקרון, . אני יוצר רכיב חדש שנקרא "generalCdlErrorHandler".  צריך גישה פונקציה שנקראת retrieveLastConfigurationError והוא זה מטופל של אובייקט היקף.  . אני בטח פשוט להשתמש ההיקף של ההורה, אבל זה מרגיש עצל.  אם מישהו חושב שאני צריך לעשות את זה, אשמח לשמוע הערות.

. זה היה בסדר, אבל לא קיבלתי כלום.  שגיאות צץ במסוף (לפחות פעם תיקנתי את כל השגיאות sx שיצרתי לאורך הדרך).  פשוט לא קיבלתי כל פלט של ההנחיה.  והלכתי הוסיף טקסט סטטי לפני ההנחיה ng-שואו ואני * כן * לענות. זה גרם לי לחשוב כי אולי ההנחיה לא הורשתה במרומז ליצירת vars חדשים כמו "doShowExpandedErrorDetails" או של "ng-init" יש שם. 

חזרתי לתוך ה-HTML כדי לראות שאם היה סוג והפעם WebStorm עזר לי.  היה לי כבר עובר בפונקציה retrieveLastConfigurationError ככה:

<כללי-cdl-שגיאה-המטפל retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</כללי-cdl--מטפל בשגיאות>

אבל זה באמת היה צריך להיות כזה:

<כללי-cdl--מטפל בשגיאות אחזר-האחרונה--קיימת שגיאת תצורה = "CDLController.retrieveLastConfigurationError()">
</כללי-cdl--מטפל בשגיאות>

WebStorm היה חכם מספיק כדי לדעת שזה היה חייב להיות ממוקפות.  אם זה לא סיפק את הרמז הזה, אני כנראה להיות עדיין פתרון זה חיוך.  כיף פעמים!

הטריק הוא זה: לא רק שם הרכיב הוראת מיקוף, כך גם כל התכונות שתוסיף אליו.  פעם הוספתי את המקפים, כל עבד נהדר.  הדרכה של דן קרה כדי להשתמש בשמות אחת קצרה, אז עשיתי את החיבור.

מקווה שזה עוזר למישהו.

</קצה>

undefinedמנוי על הבלוג שלי.

עקוב אחרי הטוויטר ב http://www.twitter.com/pagalvin

תשאיר הודעה

כתובת האימייל שלך לא תפורסם. שדות חובה מסומנים *