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

[אהרן]

@dovid
אינפוט שמותנה ע"י ng-if="modalVar == true"
השימוש בו נדיר ולפרק זמן קצר (בסיום השימוש האלמנט נמחק ע"י שההתניה מחזירה false)
ואני רוצה לוודא שבסיום השימוש (modalVar == false) המודל שהחזיק את תוכן האינפוט יתאפס.

מקווה שברור

[dovid]

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

 ng-if="chackAndNotify(modalVar)"

ובפונקציה:

$scope.chackAndNotify = function(value) {
   if(!value) $scope.modal = null;
   return value;
}

זה ממש טריק, לא דרך נורמלית. יש את הדרך הנורמלית שזה הwatch:

$scope.$watch('modalVar ', function() {
   if($scope.modalVar) $scope.modal = null;
});

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

אגב, modalVar == true שקול לכתיבת modalVar ללא כל תוספת.

[אהרן]

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

הייתי שמח לקבל תמונה רחבה יותר

מצטער, באמת שנסיתי!
נניח יש אלמנטים ברצף, לא ניתנים לעריכה (type=text!) שמכילים כל אחד שם פרטי ושם משפחה.
אני רוצה להוסיף שבאלמנט שחסר שם המשפחה, קליק יפתח תחתיו אינפוט להשלמת שם המשפחה.

אז עשיתי כך (ממשיך עם הדוגמא מהאשכול הקודם):

<div ng-repeat="section in allObj">
  <button ng-repeat="fullName  in section" ng-click="changeName(fullName,section)">
    {{fullName.name}}
    **<input ng-if="addLastNmaeInput == fullName" ng-model="addLastNmaeText">{{addLastNmaeText}}</input>**
</button>
</div>

בפונקציה של הקליק הוספתי:

$scope.changeName = function(element, parent) {
  element.name = 'aharon';
  **$scope.addLastNmaeInput = element;**
};

(המוקף בכוכבים זה התוספת)

עשיתי א"ז בצורה כזו כי במהלך אחד אני מרויח כמה דברים חשובים

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

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

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

שמעתי שפונקציה וואצ' יקר במשאבים.

אפשרי? נכון? כדאי?

[אהרן]

ואגב, אתה רואה סיבה למה המודל לא מתעדכן בכתיבה לאינפוט?

[אהרן]

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

ואגב, אתה רואה סיבה למה המודל לא מתעדכן בכתיבה לאינפוט?

נראה שפה התשובה
אשמח להסבר.

תודה!!

[dovid]

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

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

[אהרן]

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

אתה גם מעיר שהוא לא עובד

המודל לא עובד, הקליק עובד טוב.

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

הספק שלי

באיזה חלק?

[אהרן]

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

נראה שפה התשובה
אשמח להסבר.

הפתרון הזה אכן פתר את הבעיה.
השאלה אם יש חסרונות בng-show לעומת ng-if
מתוכננים אלפים רבים של אלמנטים.

[אהרן]

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

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

נראה שפה התשובה
אשמח להסבר.

הפתרון הזה אכן פתר את הבעיה.
השאלה אם יש חסרונות בng-show לעומת ng-if
מתוכננים אלפים רבים של אלמנטים.

הפתרון הזה = להשתמש ב ng-show במקום ng-if.

אשמח להסבר לנאמר כאן בנידון
המשתנה שנוצר ע"י ng-init חייב להיות אוביקט ולא פרמיטיב וכך גם המשתנה שמוצמד לסקופ ומשמש כמודל?

[אהרן]

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

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

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

נראה שפה התשובה
אשמח להסבר.

הפתרון הזה אכן פתר את הבעיה.
השאלה אם יש חסרונות בng-show לעומת ng-if
מתוכננים אלפים רבים של אלמנטים.

הפתרון הזה = להשתמש ב ng-show במקום ng-if.

אשמח להסבר לנאמר כאן בנידון
המשתנה שנוצר ע"י ng-init חייב להיות אוביקט ולא פרמיטיב וכך גם המשתנה שמוצמד לסקופ ומשמש כמודל?

התשובה היא כן
כי?
רק הפניה לאוביקט מתנהג כמצביע?

[dovid]

אני התייאשתי מלהבין את מה שקרה איתך,
ולכן הוספתי מהיצירתיות שלי כדי שיעבוד.
https://plnkr.co/edit/2fnlsmQQwIt073pzJzTA?p=preview

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

[dovid]

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

[אהרן]

ערכתי את הדוגמא שלך
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 גורמת שכל התייחסות בתוכה למשתנה פרימיטיבי לא עובדת. לא מבין את עומק העניין, אבל זו עובדה.