אנגולר: ריקון אוטו' של modal כתלות במשתנה אחר

[אהרן]

ערכתי את הדוגמא שלך
https://plnkr.co/edit/yOPo7mDbOx4wiXhuSABX?p=preview
מקווה שעכשיו הכל מובן.
זה כתוב ומתוכנן נכון?

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

[dovid]

הקוד לא פוטר אותך מלדבר, מה הבעיה ואיפה אתה תקוע (או שאין בעיה ואתה שואל רק על דיירקטיב?).

[אהרן]

היו 2 נושאים עיקריים שהתקשיתי

1. שגעון שהשורה:

$scope.editName.current = null;

תפטור אותנו מהשורה:

$scope.editName.theNameToAdd = null

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

2. בתחילה לא הבנתי מדוע הקוד הזה לא עובד:

ng-model="editName.theNameToAdd"

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

ng-model="$parent.editName.theNameToAdd"

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

[dovid]

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

[אהרן]

@dovid אמר באנגולר: ריקון אוטו' של modal כתלות במשתנה אחר:

לי עובד בלי ה$parent

וואו, מוזר'! לא מצליח לשחזר, אבל בצהרים זה עבד לי בדיוק כמו בתשובה כאן
https://github.com/angular/angular.js/issues/6038

ולמה בדוגמא הזו parent לא עוזר?
https://plnkr.co/edit/aAHaSEuxQvnTUrsIK0eU?p=preview

[dovid]

הparent בנוי לקונטרולר מקונן, פשוט לא נוגע לפה.
במקרה השני הוא גם לא עוזר כי מדובר במשתנה פרימיטיבי שאליו א"א לגשת בתוך ng-repeat.

בקשר לדיירקטיב בניתי אחד לדוגמה:
https://plnkr.co/edit/OKMBQwUcwOQH5M6ix4qZ?p=preview

[אהרן]

@dovid אמר באנגולר: ריקון אוטו' של modal כתלות במשתנה אחר:

במקרה השני הוא גם לא עוזר כי מדובר במשתנה פרימיטיבי שאליו א"א לגשת בתוך ng-repeat.

למה? מה ההבדל?

[dovid]

@אהרן אמר באנגולר: ריקון אוטו' של modal כתלות במשתנה אחר:

@dovid אמר באנגולר: ריקון אוטו' של modal כתלות במשתנה אחר:

במקרה השני הוא גם לא עוזר כי מדובר במשתנה פרימיטיבי שאליו א"א לגשת בתוך ng-repeat.

למה? מה ההבדל?

כתבתי לעיל שההתנהגות של ng-repeat גורמת שכל התייחסות בתוכה למשתנה פרימיטיבי לא עובדת. לא מבין את עומק העניין, אבל זו עובדה.

[אהרן]

@dovid אמר באנגולר: ריקון אוטו' של modal כתלות במשתנה אחר:

directive עצמאי ואז תהנה גם מבידוד מלא של התנהגות התיבה ורק הערך החוזר יגיע לאלמנט

אשמח להרחבה, למה אתה מתכוון "תיבה" ומהו ה"אלמנט"?

[dovid]

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

בקשר לדיירקטיב בניתי אחד לדוגמה:
https://plnkr.co/edit/OKMBQwUcwOQH5M6ix4qZ?p=preview

[zvizvi]

@dovid אמר באנגולר: ריקון אוטו' של modal כתלות במשתנה אחר:

@אהרן אמר באנגולר: ריקון אוטו' של modal כתלות במשתנה אחר:

@dovid אמר באנגולר: ריקון אוטו' של modal כתלות במשתנה אחר:

במקרה השני הוא גם לא עוזר כי מדובר במשתנה פרימיטיבי שאליו א"א לגשת בתוך ng-repeat.

למה? מה ההבדל?

כתבתי לעיל שההתנהגות של ng-repeat גורמת שכל התייחסות בתוכה למשתנה פרימיטיבי לא עובדת. לא מבין את עומק העניין, אבל זו עובדה.

ng-repeat יוצר סקופ חדש עבור כל איטרציה.

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

[dovid]

@zvizvi אמר באנגולר: ריקון אוטו' של modal כתלות במשתנה אחר:

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

אתה מתכוון לגישת Controller as?

[zvizvi]

@dovid אמר באנגולר: ריקון אוטו' של modal כתלות במשתנה אחר:

@zvizvi אמר באנגולר: ריקון אוטו' של modal כתלות במשתנה אחר:

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

אתה מתכוון לגישת Controller as?

כן. (ואגב, לפי הכללים של ג'ון פפא יש לקרוא לו vm,
ע"ש view model
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#controlleras-with-vm)

[אהרן]

@dovid אמר באנגולר: ריקון אוטו' של modal כתלות במשתנה אחר:

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

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

ואגב אשמח להבין מהו התחביר שהשתמש בו:

var = () ^ ()

---

@zvizvi אמר באנגולר: ריקון אוטו' של modal כתלות במשתנה אחר:

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

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

---

@dovid אמר באנגולר: ריקון אוטו' של modal כתלות במשתנה אחר:

גישת Controller as?

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

---

שאלה נוספת:
אם אכין דף נפרד עם אפשרויות נרחבות יותר לעריכה, להכניס א"ז לקנטרולר נפרד ולתקשר בינהם?

שוב, תודות מראש!

[zvizvi]

@אהרן אמר באנגולר: ריקון אוטו' של modal כתלות במשתנה אחר:

בנוסף: אני לא מבין איך אפשר בקונטרולר שבדירקטיב להשתתמש ב-this, הוא ישתמש בthis של הדירקטיב?!

לא, לדיירקטיב (או לקומפוננט) יש קונטרולר והthis מפנה אליו, אצלו גם שומרים את כל המשתנים.
דירקטיב הוא סה"כ אוסף ארוז של קונטרולר, סטייל וטמפלט html. והוא מכיל גם אפשרויות שונות - כמו API בכדי לתקשר איתו וממנו, ועוד.

[אהרן]

@zvizvi אמר באנגולר: ריקון אוטו' של modal כתלות במשתנה אחר:

@אהרן אמר באנגולר: ריקון אוטו' של modal כתלות במשתנה אחר:

בנוסף: אני לא מבין איך אפשר בקונטרולר שבדירקטיב להשתתמש ב-this, הוא ישתמש בthis של הדירקטיב?!

לא, לדיירקטיב (או לקומפוננט) יש קונטרולר והthis מפנה אליו, אצלו גם שומרים את כל המשתנים.
דירקטיב הוא סה"כ אוסף ארוז של קונטרולר, סטייל וטמפלט html. והוא מכיל גם אפשרויות שונות - כמו API בכדי לתקשר איתו וממנו, ועוד.

לא הבנתי
בקונטרולר כותבים כך

app.controller('MainCtrl', function ($scope) {
  var nv = this;

  nv.allObj = [
    [{
      name: '',
      lastName: 'aaa'
    } 
  ];
});


app.directive("elUpdated", function () {

  var directive = {};

  directive.controller = ['$scope', function ($scope) {
וכו'
return directive

גם פה אפשר להוסיף

var nv = this;
nv.serch = function() {}
וכו'

???

[dovid]

@אהרן למה לא?

בקשר לX ^ Z, זה קשור לקוד שלך. אתה בודק האם אחד מהם ריק (name! || !lastName).
האופטור ^ נקרא XOR והוא מחזיר אמת רק אם אחד מהואפרנדים שלילי והשני חיובי. כלומר אם שתיהם שליליים או חיוביים הוא מחזיר false.
אבל הייתי חייב להשים סימן קריאה לפני כל ערך, כי אחרת הם לא מומרים לboolean וממילא התוצאה היא תמיד 0.