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 中相关方法和属性的更多相关文章

  1. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  2. 【JVM虚拟机】(8)--深入理解Class中--方法、属性表集合

    #[JVM虚拟机](8)--深入理解Class中--方法.属性表集合 之前有关class文件已经写了两篇博客: 1.[JVM虚拟机](5)---深入理解JVM-Class中常量池 2.[JVM虚拟机] ...

  3. IL角度理解C#中字段,属性与方法的区别

    IL角度理解C#中字段,属性与方法的区别 1.字段,属性与方法的区别 字段的本质是变量,直接在类或者结构体中声明.类或者结构体中会有实例字段,静态字段等(静态字段可实现内存共享功能,比如数学上的pi就 ...

  4. 理解css中的position属性

    理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...

  5. 【学习笔记】六:面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承

    ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...

  6. Elasticsearch 理解mapping中的store属性

    默认情况下,对字段值进行索引以使其可搜索,但不存储它们 (store). 这意味着可以查询该字段,但是无法检索原始字段值.在这里我们必须理解的一点是: 如果一个字段的mapping中含有store属性 ...

  7. 理解display中的box-flex属性

    今天有个同学在面试的时候碰到了使用css2和css3实现一种页面布局,要求页面效果如下: 在实现这种页面布局时,他使用了display:box-flex,下面是相应的代码: css2 方式 <! ...

  8. 怎样理解 Vue 中的计算属性 computed 和 methods ?

    需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...

  9. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

随机推荐

  1. FAST特征点检测算法

    一 原始方法 简介 在局部特征点检测快速发展的时候,人们对于特征的认识也越来越深入,近几年来许多学者提出了许许多多的特征检测算法及其改进算法,在众多的特征提取算法中,不乏涌现出佼佼者. 从最早期的Mo ...

  2. 关于innodb mtr模块

    mtr (mini-transaction)微事务 mtr作用 mtr模块主要保证物理操作的一致性和原子性 1 一致性:通过读写锁来保证 2 原子性:涉及到的物理更新,都记入redo日志 mtr何时使 ...

  3. 转:jQuery选择器大全(48个代码片段+21幅图演示)

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写 ...

  4. Python中的分组函数(groupby、itertools)

    from operator import itemgetter #itemgetter用来去dict中的key,省去了使用lambda函数 from itertools import groupby ...

  5. Office 手动kms激活方法

    服务作用:在线激活windows和office 适用对象:VOL版本的windows和office 适用版本:截止到win10和office2016的所有版本 服务时间:24H,偶尔更新维护 优点:在 ...

  6. linux操作系统基础讲解

    计算机的组成及功能: 现在市场上的计算机组成结构遵循冯 诺依曼体系,由CPU.内存.I/O设备,存储四大部分组成. CPU是整个计算机的核心部件,主要由运算器和控制器组成,它负责整个计算机的程序运行以 ...

  7. 一、git创建版本库及提交

    第一步:从Git官网直接   下载安装程序  ,并自行配置环境变量. git config --global user.name "Your Name" // 设置用户名 git ...

  8. mpvue 使用echarts动态绘制图表(数据改变重新渲染图表)

    最近在公司开发一款微信小程序,按照客户需求用饼状图显示当前设备状态(开机.故障.关机),于是就在网上寻找各种资料,找了很多mpvue使用关于echarts绘制图表,最终功夫不负有心人,找到一篇关于mp ...

  9. ethereum/EIPs-170 Contract code size limit

    eip title author type category status created 170 Contract code size limit Vitalik Buterin Standards ...

  10. Python os.walk() 方法

    #coding=utf-8 import os #(dirpath, dirnames, filenames)[文件夹路径, 文件夹名字, 文件名] def file_name(file_dir): ...