理解 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属性共 ...
随机推荐
- 【Python】多线程
import threading import time class myThread (threading.Thread): #继承父类threading.Thread def __init__(s ...
- sysdate()简单用法
环境: create table rq (xm varchar2(10),age number,zw varchar(10),rzrq date);insert into rq values ('小崔 ...
- JS内置对象-String对象、Date日期对象、Array数组对象、Math对象
一.JavaScript中的所有事物都是对象:字符串.数组.数值.函数... 1.每个对象带有属性和方法 JavaScript允许自定义对象 2.自定义对象 a.定义并创建对象实例 b.使用函数来定义 ...
- jQuery UI dialog插件出错信息:$(this).dialog is not a function
使用jQuery UI 1.7.2 dialog插件,遇到这样的错误: [img]http://dl.iteye.com/upload/attachment/308166/97c428e4-2ce2- ...
- Nodejs学习资源汇总
Node.js v6.3.1 Documentation https://nodejs.org/dist/latest-v6.x/docs/api/ npm官网 https://www.npmjs ...
- VGA、DVI、HDMI、DP 接口介绍及优劣
VGA.DVI.HDMI.DP 接口介绍及优劣 随着日新月异的发展,就目前显卡上面常见的输出接口而言,我们所熟知的有以下几种: VGA.DVI.HDMI和DP (DisplayPort). 这四种 ...
- Postman-断言和Runner
断言(部分) // 推荐用全等 ===,确保类型和值都一致 tests['Status code is 200'] = responseCode.code === 200; //判断响应结果是否是20 ...
- linux网络工具iproute2的使用简介
一.写本文的目的 本文完全是自己在学习iproute2的过程中搜集的大杂烩,记录在这里,方便以后自己查询学习,图片都是来自网络,在此表示感谢! 二.简单了解iproute2工具套装 iproute2是 ...
- Rsyslog配置文件详解(转)
最近在搭建日志审计服务器,使用了rsyslog,发现这篇文章很有用,收藏一下. 原文链接:http://my.oschina.net/0757/blog/198329 具体内容: 非常详细的rsysl ...
- Linux下jdk&tomcat的安装
unbantu: 1.下载相应版本的jdk及tomcat:sudo wget ${url} 2.解压: tar zxvf jdk-7u79-linux-x64.tar.gz tar zxvf apa ...