ngModel לא עובד על input עם directive חיצוני

[brachiW]

שלום,
כשאני משתמשת בdirective על input הערך לא נכנס לי ל ngmodel.
אני משתמשת ב icheck וב clockpicker.
ראיתי את הבעיה שלי ב angularjs
link text

הם פתרו את זה בצורה הבאה
link text

אשמח לדעת איך עושים את זה באנגולר 4+
תודה

[יוסף בן שמעון]

זה לא בגלל עצם השימוש בדיירקטיב, בינדינג עובד טוב גם עם דייקרטיב
https://stackblitz.com/edit/angular-mre2hg
הבעיה כנראה בגלל שהפלאגינים האלה משתלטים על האלמנטים המקוריים ומחליפים אותם, אז הערך לא מתעדכן למשתנה.
אני לא יודע מה הפיתרון, אפשר אולי להשתמש באירועים שהפלאגין מספק כדי לעשות בינדינג ידני.
דוגמא:

export class IcheckDirective {
    @Input() data;
    constructor(el: ElementRef) {
        $(el.nativeElement).iCheck()
        .on('ifChecked', ()=>this.data.select = true)
        .on('ifUnchecked', ()=>this.data.select = false)
    }
}

<input type="checkbox" name="name" appIcheck [data]="user">

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

[dovid]

בא נניח לangularjs כי היא לא קשורה לבעיה.
הבעיה היא גם לא השילוב של ngModel ודיירקטיב, שהם עובדים מצויין באנגולר, כפי שאפשר לראות פה.
הבעיה היא כנראה הדיירקטיבים הספציפיים: clockpicker, icheck

מחיפוש קל באינטרנט עולה שהם דיירקטיבים של angularjs כלומר הם לא אמורים להתאים כלל לאנגולר2+ בלי כתיבת קוד מתווך.
אפשר להתאים אותם, למשל לגבי הclockpicker ראי פה הוראות הטמעה, אבל זה לא מומלץ.
הכי טוב זה למצוא ספריות ייעודיות לאנגולר2+, אם את עובדת למשל עם material יש לך את זה https://agranom.github.io/ngx-material-timepicker/

[יוסף בן שמעון]

@dovid צודק, מטריאל מייתר לגמרי את הצורך ב icheck

[brachiW]

תודה
עזרתם לי!