理解角度2中的属性绑定

时间:2017-02-19 09:18:18

标签: javascript angular

我有一个天真的问题。假设我有一个如下定义的输入元素:

<input [(ngModel)]=model.username name="username" id="username">

上述内容实际上意味着现在有一个名为ngModel的 PROPERTY 在输入元素上定义,而该输入元素又被绑定到model.username。到目前为止一切都很好。

现在只是出于学习目的,我像这样访问输入元素:

let input = document.getElementbyId('username');

然后尝试检查像input.ngModel这样的东西......繁荣......没有这样的财产!

我在这里缺少什么?

2 个答案:

答案 0 :(得分:2)

根据文件https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-target

  

元素属性可能是更常见的目标,但Angular看起来   首先要查看名称是否是已知指令的属性   在以下示例中:

<div [ngClass]="classes">[ngClass] binding to the classes property</div>
  

从技术上讲,Angular将名称与指令输入匹配   指令的输入数组或a中列出的属性名称   用@Input()装饰的属性。这些输入映射到指令   自己的财产。

     

如果名称与已知指令或元素的属性不匹配,   Angular报告了一个“未知指令”错误。

所以在你的情况下,角度找到了NgModel指令@Input('ngModel') model: any;

https://github.com/angular/angular/blob/2.4.8/modules/%40angular/forms/src/directives/ng_model.ts#L112

答案 1 :(得分:0)

[(ngModel)]通过绑定值提供two-way data-binding

属性绑定从数据源提供one-way data binding以查看目标。属性绑定的一些示例是:

<input [disabled]="true">
<input [value]="{5 : 'ifSomeCondition()'}"
<input [attr.type]="{'text' : typeIsText()}"