[(ngModel)]的实现原理
来源:互联网 发布:张子枫清华附中知乎 编辑:程序博客网 时间:2024/05/21 14:52
讨论[(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属性。
转载自:http://www.cnblogs.com/JennyLin77/p/6141124.html
阅读全文
0 0
- [(ngModel)]的实现原理
- [(ngModel)]的实现原理
- 深入了解Angularjs指令中的 [(ngModel)]的实现原理
- 使用angular2的[(ngModel)]
- Error: [ngModel:constexpr] 的解决办法
- Error: [ngModel:constexpr] 的解决办法
- ngmodel和input的关系
- ngModel双向绑定的一些问题
- 指令中访问ngModel的值
- 浅谈Angular中ngModel的$render
- 【Angular】——双向绑定ngModel实现联动
- 【angular】ngModel遇见的坑:Can't bind to 'ngModel' since it isn't a known property of 'input'
- ngModel:numfmt
- Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]
- angularJS之ngModel绑定日期类型出现错误Angular error:datefmt的解决办法
- angular2在双向数据绑定时[(ngModel)]无法使用的问题
- WM_COPYDATA的实现原理
- JBPM的实现原理
- 忠于用户是海尔研发创新活力的源泉
- 技术总监和首席技术执行官的区别和职责
- Spark Standalone架构设计要点分析
- 搭建SSM项目框架全过程及思考
- VB循环
- [(ngModel)]的实现原理
- Android 自定义弹出菜单和对话框
- hdu 6114 Chess
- mysql group_concat 分组,多字段统一排序及输出数据到java
- Java Servlet完全教程
- struts2--自定义校验器
- Eclipse报错Could not resolve archetype
- 扩增子分析解读6进化树,Alpha,Beta多样性
- 菜鸟学习大数据技术的过程