ארכיון חודשי: בפברואר 2015

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

יש לי כמה אפליקציות $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

IE9 ממש לא אוהב את זה כאשר אתה לוקח קיצור עם שלך <טווח> תגים

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

image

יש לו * אמור * נראה כך:

image

 

לא רק זה היה, אבל את האירועים לחץ שלי לא היו יורים.  (רובם, בכל מקרה).

מבחינה ויזואלית, זה נראה כאילו הדברים החלו לרדת מהפסים ליד הקישור "הגדרות מתקדמות".  חפר לחלק ההוא של ה-HTML וגיליתי שיש לי את הקו הזה:

<span class = "glyphicon glyphicon--חלון חדש" />

זה נראה כמו תחביר המותר ("כרום גירסה 40.02214.94 m", זה בסדר). הלכת ושינית אותו בכל מקרה, כפי שמוצג:

<span class = "glyphicon glyphicon--בחלון חדש"></טווח>

זה תוקן.

כזה דבר קטן גרמה כזה בלאגן ענק של מסך.  כיף פעמים.

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

</קצה>

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

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