理解 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