角2指令与ngModel和ngControl

Question

我想写一个角2指令，它应具有以下行为：

1. 必须是可用的使用和不使用包装<form [ngFormModel]="form">

2. 应该使用[(ngModel)]用于数据绑定

3. 内部使用Observer，在最后一次用户输入发生后250ms内更新ngModel

4. 当使用包装<form [ngFormModel]="form">应该可以监听form.valueChanges（当然最后的用户输入后，应该解雇250毫秒）

---

我已经写了下面的指令来进行测试：

import {Directive, EventEmitter, Input, Output} from 'angular2/core' 
import {NgModel} from 'angular2/common' 
import {Observable} from 'rxjs/Observable' 

@Directive({ 
    selector: '[queryDirective]' 
}) 
export class QueryDirective { 
    constructor(public model:NgModel) {} 

    ngOnInit() { 
     this.model.control.valueChanges 
      .debounceTime(250) 
      .subscribe(val => this.model.control.updateValue(val,{emitEvent:true})); 
    } 
} 

它使用没有ngControl时的作品。然后它说没有找到NgModel的供应商。

<form [ngFormModel]="form"> 
    <input queryDirective ngControl="..." type="text" [(ngModel)]="..."> 
</form> 

但是，当我在构造函数中使用NgControl的this.model.control.updateValue方法将不会更新ngModel。

---

我在做什么错？或者是否有人有一些正在工作的示例代码？

在此先感谢！

Answer 1

我现在工作了！

这里是我的指令：

import {Directive, Renderer, ElementRef, forwardRef, Provider} from 'angular2/core' 
import {NG_VALUE_ACCESSOR, DefaultValueAccessor} from 'angular2/common' 
import {CONST_EXPR} from 'angular2/src/facade/lang' 
import {Observable} from 'rxjs/Observable' 

const PROVIDER = CONST_EXPR(new Provider(NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => QueryDirective), multi: true})); 

@Directive({ 
    selector: '[queryDirective]', 
    bindings: [PROVIDER] 
}) 
export class QueryDirective extends DefaultValueAccessor { 
    constructor(_renderer: Renderer, private el: ElementRef) { 
     super(_renderer, el); 
    } 

    ngOnInit() { 
     Observable.fromEvent(this.el.nativeElement, 'keyup') 
      .map(val => this.el.nativeElement.value) 
      .debounceTime(this.timeout) 
      o.subscribe(this.onChange); 
    } 
} 

我不知道那是什么bindings和NG_VALUE_ACCESSOR东西做，但它的工程！