理解 NgModelController 中相关方法和属性
1. 理解$formatters和$parsers方法
angular的双向绑定可以实现view和model中的值自动同步,但有时候我们不想让用户输入的(view值)和发送给后台的(model值)并不一样,这时候我们需要额外做些‘手脚’。
先看下面的例子
http://plnkr.co/edit/UQ5q5FxyBzIeEjRYYVGX?p=preview
当在文本框中输入小写字母,model的值实际上返回的是大写字母。
这是因为$parses会将view中的值进行转换并保存到对应model中。
//format text from the user (view to model)
ngModel.$parsers.push(function(value) {
return value.toLowerCase();
});
反之
如果改变model值,view中实际显示的是经过$formatters格式化后的值。并呈现给用户展示。
根据例子中,点击按钮无论将model的值设为大写还是小写,view中显示的都是小写字母。是下面的代码再起作用。
注意:用户交互时并不会触发此方法,当ngModel表达式的值发生变化才会触发。
总结: formatters() 方法将 $modelValue 转变成 $viewValue 。$parsers 方法将 $viewValue 转化成 $modelValue 。
//format text going to user (model to view)
ngModel.$formatters.push(function(value) {
return value.toUpperCase();
});
2. 理解$setViewValue,$viewValue和$render方法
$render() 方法: 当修改view value的时候被调用。会将$viewValue 渲染到directive template中。
$setViewValue(value, trigger)方法: 该方法用来更新视图值。这个方法应该在一个视图值发生变化时被调用,一般来说是在一个DOM事件处理函数中。
例如,input和select指令就调用了这个函数。 这个方法将会更新$viewValue属性,然后在$pasers中通将这个值传递给每一个函数,其中包括了验证器。这个值从$parsers输出后,将会被用于$modelValue以及ng-model属性中的表达式。
最后,所有位于$viewChangeListeners列表中注册的监听器将会被调用。
参考:
http://stackoverflow.com/questions/22841225/ngmodel-formatters-and-parsers
https://docs.angularjs.org/api/ng/type/ngModel.NgModelController
http://blog.gejiawen.com/2015/12/20/using-ng-model-controller-with-angular-directive
http://sentsin.com/web/659.html
理解 NgModelController 中相关方法和属性的更多相关文章
- 深入理解css中的margin属性
深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
- 【JVM虚拟机】(8)--深入理解Class中--方法、属性表集合
#[JVM虚拟机](8)--深入理解Class中--方法.属性表集合 之前有关class文件已经写了两篇博客: 1.[JVM虚拟机](5)---深入理解JVM-Class中常量池 2.[JVM虚拟机] ...
- IL角度理解C#中字段,属性与方法的区别
IL角度理解C#中字段,属性与方法的区别 1.字段,属性与方法的区别 字段的本质是变量,直接在类或者结构体中声明.类或者结构体中会有实例字段,静态字段等(静态字段可实现内存共享功能,比如数学上的pi就 ...
- 理解css中的position属性
理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...
- 【学习笔记】六:面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承
ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...
- Elasticsearch 理解mapping中的store属性
默认情况下,对字段值进行索引以使其可搜索,但不存储它们 (store). 这意味着可以查询该字段,但是无法检索原始字段值.在这里我们必须理解的一点是: 如果一个字段的mapping中含有store属性 ...
- 理解display中的box-flex属性
今天有个同学在面试的时候碰到了使用css2和css3实现一种页面布局,要求页面效果如下: 在实现这种页面布局时,他使用了display:box-flex,下面是相应的代码: css2 方式 <! ...
- 怎样理解 Vue 中的计算属性 computed 和 methods ?
需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
随机推荐
- ionic默认样式android和ios差异
ionicframework中android和ios在默认样式上有一些不同的地方,官方文档中都有说明,但是经常会想不起. 一.差异: 1.tab位置,$ionicConfigProvider, tab ...
- commons-pool 解析
首先抛出个常见的长连接问题: 1 都知道连接MySQL的应用中大多会使用框架例如 c3p0 ,dbcp proxool 等来管理数据库连接池. 数据库连接池毫无疑问都是采用长连接方式. 那么MySQ ...
- jboss eap6.1(1)
最近决定把公司的项目从jboss3.x迁移出来,先试着摸索一下最新的jboss服务器,从jboss官网上下了一份jboss-eap-6.1,然后找资料准备学习,同时将此次迁移过程记录下来,以备后续复习 ...
- 数据库导入.bacpac 文件创建新实例
先连接好数据库,然后打开左侧 对象资源管理器,选择数据库 右键单击 ---> 选择导入数据层应用程序 根据提示向导一步步走就行了 部分导入失败以及处理方案 异常1 : 在数据库master中拒 ...
- jquery 比较全面的API中文版地址
jquery中文API地址 里面有对各个版本的jquery的属性.方法等都有全面的介绍加例子,值得拥有!
- Git钩子详解
钩子 Git钩子是在Git仓库中特定事件发生时自动运行的脚本.可以定制一些钩子,这些钩子可以在特定的情况下被执行,分为Client端的钩子和Server端的钩子.Client端钩子被operation ...
- Don't Dismiss Georgia Tech's $6,600 Online Master's Degree
https://www.pcmag.com/commentary/343924/dont-dismiss-georgia-techs-6-600-online-masters-degree Don't ...
- OpenResty 安装配置
0. 说明 1. Windows 下安装 下载软件包 openresty-1.13.6.1-win32.zip ,解压即可食用. [开启] 直接运行 nginx.exe 在 Windows 的命令窗口 ...
- javascript,object,IDispatchEx笔记
//js: var testObj=new Object; //com内部: testObj=Object::InvokeEx(wFlags==DISPATCH_CONSTRUCT); //注: // ...
- ActiveX多线程回调JavaScript
http://www.cnblogs.com/zdxster/archive/2011/01/27/1945872.html