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. ionic默认样式android和ios差异

    ionicframework中android和ios在默认样式上有一些不同的地方,官方文档中都有说明,但是经常会想不起. 一.差异: 1.tab位置,$ionicConfigProvider, tab ...

  2. commons-pool 解析

    首先抛出个常见的长连接问题: 1  都知道连接MySQL的应用中大多会使用框架例如 c3p0 ,dbcp proxool 等来管理数据库连接池. 数据库连接池毫无疑问都是采用长连接方式. 那么MySQ ...

  3. jboss eap6.1(1)

    最近决定把公司的项目从jboss3.x迁移出来,先试着摸索一下最新的jboss服务器,从jboss官网上下了一份jboss-eap-6.1,然后找资料准备学习,同时将此次迁移过程记录下来,以备后续复习 ...

  4. 数据库导入.bacpac 文件创建新实例

    先连接好数据库,然后打开左侧 对象资源管理器,选择数据库  右键单击 ---> 选择导入数据层应用程序 根据提示向导一步步走就行了 部分导入失败以及处理方案 异常1 : 在数据库master中拒 ...

  5. jquery 比较全面的API中文版地址

    jquery中文API地址 里面有对各个版本的jquery的属性.方法等都有全面的介绍加例子,值得拥有!

  6. Git钩子详解

    钩子 Git钩子是在Git仓库中特定事件发生时自动运行的脚本.可以定制一些钩子,这些钩子可以在特定的情况下被执行,分为Client端的钩子和Server端的钩子.Client端钩子被operation ...

  7. 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 ...

  8. OpenResty 安装配置

    0. 说明 1. Windows 下安装 下载软件包 openresty-1.13.6.1-win32.zip ,解压即可食用. [开启] 直接运行 nginx.exe 在 Windows 的命令窗口 ...

  9. javascript,object,IDispatchEx笔记

    //js: var testObj=new Object; //com内部: testObj=Object::InvokeEx(wFlags==DISPATCH_CONSTRUCT); //注: // ...

  10. ActiveX多线程回调JavaScript

    http://www.cnblogs.com/zdxster/archive/2011/01/27/1945872.html