Угловая 2 пользовательская директива не обновляет модель

Question

Я использую настраиваемую директиву, и она должна установить атрибут значения для хоста. Проблема заключается в том, что он не обновляет модель компонента и только обновляет значение элемента.

Вот ссылка живой plnkr: https://plnkr.co/edit/lcT4q9EP3OEnuIDcGobC?p=preview

//our root app component 
import {Component} from 'angular2/core'; 
import { Directive, ElementRef, OnInit, HostListener } from 'angular2/core'; 

@Directive({selector: '[myData]'}) 

class MyDataDirective implements OnInit { 
    private el: any; 
    constructor(el: ElementRef) { 
    this.el = el.nativeElement 
    } 

    @HostListener('focus') onFocus() { 
    console.log("focus event triggered...") 
    this.el.setAttribute("value", "On Focus value") //Input value changes but model doesn't update 
    } 

    ngOnInit() { 
    console.log("oninit function called...") 
    this.el.setAttribute('value', 1234) 

    } 
} 


@Component({ 
    selector: 'my-app', 
    template: ` 
    <input type="text" placeholder="Enter text" [(value)]="inputValue" myData/> 
    `; 
    directives: [MyDataDirective] 
}) 

export class App { 
    constructor() { 
    this.inputValue = "Value from model" 
    } 
} 

Answer 1

Обновление входной атрибут значение не изменяется значение, которое мы можем увидеть

а также из документации:

В самом деле, как только мы начнем привязку данных, мы больше не работаем с атрибутами HTML . Мы не устанавливаем атрибуты. Мы устанавливаем свойства элементов, компонентов и директив DOM .

• https://angular.io/docs/ts/latest/guide/template-syntax.html

Если изменить

this.el.setAttribute("value", "On Focus value") 

с

this.el.value = "On Focus value" 

он должен обновить вход, но не модель.

Если вы хотите обновить модель таким образом, вы должны знать, что банан в поле связывания [(value)] так же, как:

[value]="inputValue" (valueChange)="inputValue="$event" 

Так что ваша директива может выглядеть следующим образом:

class MyDataDirective implements OnInit { 
    private el: any; 
    constructor(el: ElementRef) { 
    this.el = el.nativeElement 
    } 
    @Output() valueChange = new EventEmitter(); 

    @HostListener('focus') onFocus() { 
    console.log("focus event triggered...") 
    this.valueChange.emit("On Focus value"); 
    } 

    @HostListener('input') onInput() { 
    console.log("input event triggered...") 
    this.valueChange.emit(this.el.value); 
    } 

    ngOnInit() { 
    console.log("oninit function called...") 
    this.valueChange.emit("1234"); 

    } 
} 

Plunker Example

Эта статья может быть b е заинтересованы для вас

• Angular 2 Template Syntax