[(ngModel)]的实现原理

http://www.cnblogs.com/JennyLin77/p/6141124.html

讨论[(ngModel)]之前，先讲下属性绑定和事件绑定。

 

在属性绑定中，值从模型中流动到视图上的目标属性。[]，通过把属性名放在方括号中来标记出目标属性。这是从模型到视图的单向数据绑定。

 

在事件绑定中，值从视图上的目标属性流动到模型。()，通过把属性名放在圆括号中来标记出目标属性。这是从视图到模型的（反向的）单向数据绑定。

 

所以，组合[]和()就可以实现双向数据绑定和双向数据流。

 

事实上，我们也可以把NgModel绑定拆分成两个独立的绑定，属性绑定和事件绑定。

eg：

NgModel绑定

<input type="text" class="form-control" id="name" required [(ngModel)]="name" name="name">

解析：[(ngModel)]绑定组件属性name。

 

改用属性绑定和事件绑定

1 <input type="text" class="form-control" id="name" required           
2     [ngModel]="name" name="name"
3     (ngModelChange)="name = $event" >

解析：

[(ngModel)]为属性绑定，绑定组件属性name。

 

(ngModelChange)为事件绑定，看起来可能有点怪。现在来解释下。

因为ngModelChange并非<input>元素的事件。它实际来自NgModel指令的事件属性。当Angular在表单中看到[(x)]的绑定目标时，它会期待这个x指令有一个名为x的输入属性，和一个名为xChange的输出属性。

把这里的x替换成ngModel，就可以理解得通了。

还有一个一开始看得有点蒙圈的地方，是模板表达式中的model.name = $event。我们理解的$event对象一帮来自DOM事件。但ngModelChange属性不会生成DOM事件，因为它是Angular EventEmitter类型的属性。当它触发时，$event返回的是输入框的值，也正是希望赋给组件name属性的值。

 

总结：在实践中，我们优先使用[(ngModel)]形式的双向绑定，只有当时间处理函数需要处理合并或限制按键频率等特殊情况时，才会将双向数据拆分开来，改成独立的事件处理函数（即改成上面的代码二方式来实现）。

 

注意：

当在表单中使用[(ngModel)]时，必须要定义name属性。