讨论[(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. 玩转Vim 编辑器

    一:VIM快速入门 1.vim模式介绍 以下介绍内容来自维基百科Vim 从vi演生出来的Vim具有多种模式,这种独特的设计容易使初学者产生混淆.几乎所有的编辑器都会有插入和执行命令两种模式,并且大多数 ...

  2. c# 基础 object ,new操作符,类型转换

    参考页面: http://www.yuanjiaocheng.net/webapi/config-webapi.html http://www.yuanjiaocheng.net/webapi/web ...

  3. javaScript之BOM操作1

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  5. Win10提示没有权限使用网络资源问题解决

    借鉴链接:http://www.cr173.com/html/67361_1.html Win10提示没有权限使用网络资源解决方法 1.打开控制面板; 2.在所有控制面板项中找到凭据管理器; 3.添加 ...

  6. 仿陌陌的ios客户端+服务端源码项目

    软件功能:模仿陌陌客户端,功能很相似,注册.登陆.上传照片.浏览照片.浏览查找附近会员.关注.取消关注.聊天.语音和文字聊天,还有拼车和搭车的功能,支持微博分享和查找好友. 后台是php+mysql, ...

  7. 项目管理_FindBugs的使用

    本章将讲述如何在Myeclipse下,使用FindBugs,静态分析工具,无需开发人员费劲就能找出代码中已有的缺陷. 一:Myeclipse下如何安装FindBugs插件 1:FindBugs插件下载 ...

  8. CentOS:设置系统级代理(转)

    原文地址:http://www.cnblogs.com/cocowool/archive/2012/07/05/2578487.html YUM代理设置 编辑/etc/yum.conf,在最后加入 # ...

  9. nginx启动报错:/usr/local/nginx/sbin/nginx: error while loading shared libraries: libcrypto.so.1.1: cannot open shared object file: No such file or directory

    查看依赖库:

  10. JAVA代码验证身份证信息

    java验证身份证信息代码 转自:http://www.blogjava.net/xylz/archive/2011/01/05/342330.html import java.util.Calend ...