理解 NgModelController 中相关方法和属性
2017-04-21 13:00
323 查看
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
相关文章推荐
- 利用ngModel相关属性及方法自定义表单验证指令
- ngModelController的方法和属性的使用
- iOS:UIViewController周期、属性和相关方法
- 基于Angular中ng-controller父子级嵌套的相关属性详解
- smartupload相关属性方法
- window 及相关对象的属性和方法
- 伪装的方法当属性---.net 属性理解
- 原创第一弹:ObjectDataSource相关属性及事件的理解
- VS2005下自定义用户控件 如何实现属性及方法的相关智能提示
- 使用Controller.UpdateModel方法来更新ViewModel
- FLASH播放器控件相关属性和方法说明.
- 【C#属性理解】--与SQL交互用到的 【DataSet】相关
- 对xmlHttp对象方法和属性的理解
- Asp.net 2.0 中如何调用用户控件(UserControl)的相关方法或属性/如何传参等
- JS获取当前页面路径的相关方法(属性)
- vb.net中用户自定义控件中属性、方法、事件的理解
- 对xmlHttp对象方法和属性的理解
- VS2005下自定义用户控件 如何实现属性及方法的相关智能提示
- VS2005下自定义用户控件 如何实现属性及方法的相关智能提示
- cakephp学习之Model(4)--------自定义方法与属性