如何从 Angular 2 中的指令更新模型？

Question

如何在从 Jquery Datepicker 更改后更新我的模型？如果我手动输入<input> 模型会更新，但在从 Jquery Datepicker 弹出窗口中进行选择后模型不会更新。 <input> 值会随着所选日期更新，但模型不会改变。

我已经尝试将 datepicker() 包裹在超时中，但这也不起作用。如何让模型知道指令的变化？

在组件模板中输入：

<input type="text" class="datepicker" [(ngModel)]="foreigndate" datepicker>

指令：

@Directive({
  selector: '[datepicker]'
})
export class DatePickerDirective {
  constructor(el: ElementRef) {
    $(el.nativeElement).datepicker();
  }
}

Answer 1

[(ngModel)] 会在input 被触发时更新foreigndate，而 datepicker 更新值时似乎并非如此。

http://api.jqueryui.com/datepicker/ 不提供有关值更改时触发的事件的任何信息。

如果您可以使用此解决方法

<input type="text" class="datepicker" [(ngModel)]="foreigndate" datepicker (someEvent)="foreigndate=$event.target.value">

以这种方式收听change事件可能值得一试。

否则这应该可以工作

<input #datepicker type="text" class="datepicker" [(ngModel)]="foreigndate" datepicker>

@ViewChild('datepicker') datePicker:ElementRef;

ngDoCheck() {
  this.foreigndate = this.datePicker.nativeElement.value;
}