讨论[(ngModel)]之前,先讲下属性绑定和事件绑定。
 
在属性绑定中,值从模型中流动到视图上的目标属性。[],通过把属性名放在方括号中来标记出目标属性。这是从模型到视图的单向数据绑定。
 
在事件绑定中,值从视图上的目标属性流动到模型。(),通过把属性名放在圆括号中来标记出目标属性。这是从视图到模型的(反向的)单向数据绑定。
 
所以,组合[]和()就可以实现双向数据绑定和双向数据流。
 
事实上,我们也可以把NgModel绑定拆分成两个独立的绑定,属性绑定和事件绑定。
eg:
NgModel绑定
<input type="text" class="form-control" id="name" required [(ngModel)]="name" name="name">
解析:[(ngModel)]绑定组件属性name。
 
改用属性绑定和事件绑定
 <input type="text" class="form-control" id="name" required
[ngModel]="name" name="name"
(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属性。
 
这是我学习angular2双向数据绑定时的笔记和见解,可能理解得还不够透彻,以后可能还要对它进行修缮,先打个印记吧!  O. O

[(ngModel)]的实现原理的更多相关文章

  1. ngModel 值不更新/显示

    angular中的$scope是页面(view)和数据(model)之间的桥梁,它链接了页面元素和model,也是angular双向绑定机制的核心. 而ngModel是angular用来处理表单(fo ...

  2. Angular 4+ 修仙之路

    Angular 4.x 快速入门 Angular 4 快速入门 涉及 Angular 简介.环境搭建.插件表达式.自定义组件.表单模块.Http 模块等 Angular 4 基础教程 涉及 Angul ...

  3. (译) Angular运行原理揭秘 Part 1

    当你用AngularJS写的应用越多, 你会越发的觉得它相当神奇. 之前我用AngularJS实现了相当多酷炫的效果, 所以我决定去看看它的源码, 我想这样也许我能知道它的原理. 下面是我从源码中找到 ...

  4. 【转】Angular运行原理揭秘 Part 1

    当你用AngularJS写的应用越多, 你会越发的觉得它相当神奇. 之前我用AngularJS实现了相当多酷炫的效果, 所以我决定去看看它的源码, 我想这样也许我能知道它的原理. 下面是我从源码中找到 ...

  5. 谈谈Angular关于$watch,$apply 以及 $digest的工作原理

    这篇文章主要是面向那些刚开始学AngularJs和想要了解数据绑定(data-binding)是怎么工作的, 如果你已经熟悉如何使用angularjs了,我强烈建议你不用阅读了. angularjs使 ...

  6. AngularJS的工作原理1

    AngularJS的工作原理 个人觉得,要很好的理解AngularJS的运行机制,才能尽可能避免掉到坑里面去.在这篇文章中,我将根据网上的资料和自己的理解对AngularJS的在启动后,每一步都做了些 ...

  7. AngularJS的工作原理

    AngularJS的工作原理 个人觉得,要很好的理解AngularJS的运行机制,才能尽可能避免掉到坑里面去.在这篇文章中,我将根据网上的资料和自己的理解对AngularJS的在启动后,每一步都做了些 ...

  8. 再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

    这篇是对angularJS的一些疑点回顾,是对目前angularJS开发的各种常见问题的整理汇总.如果对文中的题目全部了然于胸,觉得对整个angular框架应该掌握的七七八八了.希望志同道合的通知补充 ...

  9. AngularJS_简介、特性及基本使用_及其工作原理

    转自:angularJS 的工作原理 转自:通过<script>标签引入到 HTML 中,那么此时 Angular 就做为一个普通的 DOM 节点等待浏览器解析 当浏览器解析到这个节点时, ...

随机推荐

  1. AspNetPager分页控件样式的使用

    分页是Web应用程序中最常用到的功能之一,AspNetPager  简单实用,应用到项目后台中,棒极了! 自定义样式: <style type="text/css"> ...

  2. Nginx学习笔记--001-Nginx快速搭建

    Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.Nginx是由Igor Sysoev为俄罗斯访问量第二的R ...

  3. Consul-template的简单应用:配置中心,服务发现与健康监测

    简介 Consul-template是Consul的一个方扩展工具,通过监听Consul中的数据可以动态修改一些配置文件,大家比较热衷于应用在Nginx,HAProxy上动态配置健康状态下的客户端反向 ...

  4. spring mvc 数据校验

    1.需要导入的jar包: slf4j-api-1.7.21.jar validation-api-1.0.0.GA.jar hibernate-validator-4.0.1.GA.jar 2.访问页 ...

  5. jQuery.data() 使用方法

    data() 方法向被选元素附加数据,或者从被选元素获取数据.在实际开发中,可以用来记录上一步操作某一对象的值,来给下一步操作做一些判断 $("#btn1").click(func ...

  6. 我的MYSQL学习心得(十) 自定义存储过程和函数

    我的MYSQL学习心得(十) 自定义存储过程和函数 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心 ...

  7. 【腾讯Bugly干货分享】JSPatch 成长之路

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/579efa7083355a9a57a1ac5b Dev Club 是一个交流移动 ...

  8. 匹夫细说C#:不是“栈类型”的值类型,从生命周期聊存储位置

    0x00 前言: 匹夫在日常和别人交流的时候,常常会发现一旦讨论涉及到“类型”,话题的热度就会立马升温,因为很多似是而非.或者片面的概念常常被人们当做是全面和正确的答案.加之最近在园子看到有人翻译的& ...

  9. Thinking in Unity3D:渲染管线中的Rendering Path

      关于<Thinking in Unity3D> 笔者在研究和使用Unity3D的过程中,获得了一些Unity3D方面的信息,同时也感叹Unity3D设计之精妙.不得不说,笔者最近几年的 ...

  10. Java线程池解析

    Java的一大优势是能完成多线程任务,对线程的封装和调度非常好,那么它又是如何实现的呢? jdk的包下和线程相关类的类图. 从上面可以看出Java的线程池主的实现类主要有两个类ThreadPoolEx ...