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