למה ng-disabled לא עובד כמצופה...

[ש.ב.ח.]

יצרתי כפתור עם ng-disabled בהתאם לפרטים שעל המשתמש לבחור, אם הוא לא בחר בהם, הכפתור לא יפעל.
הפרטים משתנים מעניין לעניין לכן הng-disabled הוא לפי return של פונקציה כזאת

this.validationProduct = function(){
				var validation = true;
				
				if(this.product.price_size && !this.productSelect.sizeSelected){
					validation = false;
				}
				
				if(this.product.color_base && !this.productSelect.color_base){
					validation = false;
				}
				if(this.product.color_wood && !this.productSelect.color_wood){
					validation = false;
				}
				if(this.product.color_metal && !this.productSelect.color_metal){
					validation = false;
				}

				if(this.productSelect.amount <1){
					validation = false;
				}
					return validation;
	
			}

בhtml זה כך:

<button class="btn btn-turquoise m-auto" ng-disabled="!ctrl.validationProduct()" ng-click="ctrl.addProductToOrder()">הוסף פריט להזמנה</button>

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

[מנצפך]

תכתוב לקונסול את הערך validation לפני ה return
זה הערך שאתה מצפה לקבל?

[ש.ב.ח.]

@מנצפך
ברור שבדקתי כך, אין שום תגובה בconsole.

[מנצפך]

@ש-ב-ח אמר בלמה ng-disabled לא עובד כמצופה...:

ברור שבדקתי כך, אין שום תגובה בconsole.

אוקי, זה עכשיו ברור למה זה לא עובד. כי הוא בכלל לא מריץ את הפונקציה כמצופה.
שים כתיבה לקונסול בתחילת הפוקנציה ותראה אם הוא כותב.
זה סה"כ debug פשוט.

[dovid]

@ש-ב-ח אין שום שגיאה בקונסול?

[ש.ב.ח.]

@מנצפך
ברור, וזו השאלה...

[ש.ב.ח.]

@dovid
לא מצאתי שגיאה קשורה....
(יש שני שגיאות שמופיעות בכל מקרה. ואמרתי, במוצרים אחרים הכל עובד פיקס)

בכל מקרה, אולי בכל זאת זה קשור לשגיאה הזאת (אל אף שהיא מופיעה בכל מקרה פעם אחת בכל ריענון).

איך באמת מטפלים בה?
זה נראה שמשהו שם בjQuery לא מסכים לאטריפולציה של אנגולר... (חשוב להדגיש שהתמונה כן נראת למשתמש, כלומר, חזותי נראה שהכל תקין).

[dovid]

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

[ש.ב.ח.]

@dovid
מדובר בתבנית וורדפרס... מלאן קבצים... להעלות לשרת חי? זה יעזור?

[dovid]

@ש-ב-ח זה ממש לא קשור שזה תבנית וורדפרס.
אתה פותח דף HTML חדש במחשב או בשירות אונליין (כמו https://plnkr.co/ או https://codepen.io/ ועוד).
ואתה מתחיל מקטע קוד אנגולרי קטנטן וחותר להגיע למצב שהבעיה חוזרת על עצמה.
קודם אתה עושה קונטרוללר קטן עם נתונים הנצרכים, עושה אינפוטים מאוגדים אליהם, ולבסוף ng-diable כפי שעשית.
אם הבעיה לא מתרחשת אתה מחפש הבדלים בין הדוגמא לבין המקרה שלך, ומעתיק אותם - עד שאתה מצליח ליצור את הבעיה מחדש.
אם אתה מצליח, אשמח לשיתוף.

[ש.ב.ח.]

@dovid
זו הייתה עבודה... והנה:
debuger.rar

תודה מראש

[ש.ב.ח.]

@dovid
עשיתי console.log לכל הקונטרולר...
מוזר... בפריטים שאכן זה לא עובד אין בכלל את הפונקציה בקונטרולר... איך זה?

[ש.ב.ח.]

מצאתי אותו!!!!!!!!!
בטעות הפונקציה (כלומר הוספת האיבר לאובייקט הקונטרולר) נוספה בתוך איבר/פונקציה אחרת...
איזה תסכול!!!

[dovid]

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

עכ"פ כעת אתה פטור...
פתחתי את הפרוייקט (היפה מאוד!) ולהלן הערות:
א. חלק מהסקריפטים שמת בסוף תגית body וחלק בhead.
הרעיון לשים בסוף הbosy הוא הבטחה שהאלמנטים בדף יהיו קיימים כשהסקריפט יתחיל לרוץ.
לא יודע אם זה שייך פה, אך בכל אופן תוכל להיות עקבי ולשים את כולם פה או פה, ולא לחלק.
ב. הסקריפט של bootstrap צריך את הjQuery ממילא הוא צריך להיות אחריו.
ג. אם יש jQuery בדף, עדיף שהיא תהיה לפני הangular כי היא עושה בו שימוש ואם הוא נטען אחריה זה כפל מיותר (אם האנגולר רואה שאין jQuery היא טוענת מערכת קטנה בשם jqLite. אם שמים את הjQuery קודם היא חוסכת את המערכת הזו).

לגבי השגיאות, אצלי יש כמה שגיאות:
א. Uncaught TypeError: Cannot read property 'fn' of undefined
זה קשור לבוטסטרפ שלא מוצא את הjQuery

ב. http://errors.angularjs.org/1.7.9/jqLite/nosel
שמקורה בשורה הבאה:

angular.element('.form-product-container').scrollTop(0);

זו שגיאה שאומרת שהjqLite לא תומך בפונקציה שהjQuery כן תומך.

ג. http://errors.angularjs.org/1.7.9/$sce/unsafe
אני לא הבנתי מה גורם אותה.

שינוי של סדר הסקריפטים כדלהלן פתר את שני השגיאות הראשונות (שמתי את כולם בסוף הbody ובhead השארתי רק סגנונות):

<body ng-app="app">
  <product-arcive></product-arcive>

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdn.rtlcss.com/bootstrap/v4.2.1/js/bootstrap.min.js"></script>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
  <script type="text/javascript" src="https://code.angularjs.org/1.7.9/angular-sanitize.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
</body>

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

[ש.ב.ח.]

@dovid
מקבל את ההערות הבונות (וגם את המחמאות...).

• בגדול לא עניין אותי משגיאות אחרות כי רציתי לגשת ישר לעניין.

• לגבי העיצוב וכו', פשוט העתקתי חלקים מהקוד שלי כי לא רציתי להתקשקש עם קוד חדש...

• את השגיאה העיקרית שלי כבר מצאתי כמו שראית למעלה...

• בקשר לשגיאה שלא הבנת מקורה. היא בגלל שיש שם שימוש בng-html-bind בשעה שלא הוזרק המודל לapp.

תודה רבה.

[dovid]

@ש-ב-ח אמר בלמה ng-disabled לא עובד כמצופה...:

• בגדול לא עניין אותי משגיאות אחרות כי רציתי לגשת ישר לעניין.

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

[ש.ב.ח.]

@dovid אמר בלמה ng-disabled לא עובד כמצופה...:

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

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

[yossiz]

@ש-ב-ח גם אני מצטרף למחמאות

[אהרן]

איך אתם פותחים את הדף?