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)]被触发时，

foreigndate更新input，而当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;
}

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

1 个答案: