angularJs中ngModel的坑
angular中指令被用的最多的除了ng-repeat之外就非他莫属了吧,由于各种业务的需求,我们经常需要去写一些继承ngModel的指令,来满足各种奇葩需求,最多的莫过于表单的验证啦,另外你在封装一些jquery插件的时候,也是需要继承ngModel的,最典型的莫过于 datepicker、fileUpload等等。
但是ngModel本身其实有很多坑,在这里分享给大家,如果大家又遇到其他问题,欢迎补充:
首先我们要知道一些概念的东西,这里我就不占篇幅了,不了解的可以先去看看这篇文章:
http://www.cnblogs.com/liulangmao/p/4110137.html
在这里,我基本分为两种问题,一种是viewValue和modelValue不同的问题,另一种是管道问题
第一种:viewValue和modelValue不同的问题
1.viewValue想变成modelValue
2.modelValue想变成ViewValue
3.moduleValue想和viewModel不一样
4.viewModel和DOM元素的值不一样
要想解决这些问题,我们先来了解一些$apply的一个问题,那就是执行$apply之后数据是以什么为主的
①viewValue -> modelValue
②modelValue -> viewValue,于是我们写了下面这个指令
<input type="text" ng-model="vm.modelTest" model-test>
.directive('modelTest',function(){return {require : 'ngModel',link : function(scope,iElm,iAttrs,ngModelCtrl){iElm.on('mouseenter',function(){console.info("打印出更改之后,没有执行$apply的值")console.log(ngModelCtrl);//更改modelValue的值ngModelCtrl.$modelValue = "test change";console.info("打印出更改之后,没有执行$apply的值")console.log(ngModelCtrl);//执行$apply scope.$apply();console.info("打印出更改之后,执行$apply的值")console.log(ngModelCtrl);}) }}})
从上面的指令,我们不难得出一个比较武断的结论 $apply会根据viewValue的值而改变modelValue的值,也就是modelValue -> viewValue,那么,我们可以开始解决我们的问题了。
1.viewValue想变成modelValue
这种情况很少, 但是如果你在jq的操作就可能发生这种需求,一般依然还是$apply让model的值重新更新,使用了$apply就会触发$render()函数,因为modelValue的变化,会导致$render触发
2.modelValue想变成ViewValue (看了上面的实验,我想你应该懂了,直接使用$apply)
3.moduleValue想和viewModel不一样
一般情况都会使用管道去解决,但是有个其他思路可以提供给大家,下面这段代码是在国外看到的,觉得挺不错的,效果大家可以去尝试下,将model的值变成数组。
ngModelCtrl.$viewChangeListeners.push(function(){$parse(iAttrs.ngModel).assign(scope, ngModelCtrl.$viewValue.split(',')); });
第二种:管道问题
管道是什么呢,在ngModel里面其实就是view视图和model视图数据交互的时候需要经过的数组或对象,这个数组或对象由方法组成,每次经过都会执行数组里面的方法,并返回结果。一共有四种管道
$formatters :它是model视图转向view视图的管道(数组),model的值会经过他才转变成view视图的值,另外它的调用顺序是最特别的,从后往前调用,,越在数组后面,越早调用。
$parsers : 它正好是跟$formatters相反,是view视图转向model视图的管道(数组),view的值会经过他才转变成model视图的值,在1.2.x(兼容IE8)之前一般我们会在这里实现或扩展验证功能
$validators:这是在1.3.x之后出现的管道(json对象),来帮助我们实现和扩展验证功能的,当我们进入$parsers的同时,同时也会进入$validators,在这里我贴段源码(验证required)给大家看看,我想大家应该能理解这个管道的功能
ctrl.$validators.required = function(modelValue, viewValue) {return !attr.required || !ctrl.$isEmpty(viewValue);};
$asyncValidators :功能与$validators相似,不同的是他可以实现异步验证,你可以在管道内部执行异步处理,会在结果返回之后,才去设置验证结果,这是个大课题,我看到有人讨论过,我也就不详细讲了http://www.cnblogs.com/liulangmao/p/4118868.html可以进去这个博客看看。
好了,ngModel的一些东西基本已将讲完了,另外还有一些就不仔细去说了,我的博客里面还有一篇关于$render的详解,有兴趣的可以了解下。
此帖是原创,转载请注明
转载于:https://www.cnblogs.com/HeJason/p/5486975.html
angularJs中ngModel的坑相关推荐
- AngularJs 中ngModel绑定HTML5 date数据同步问题
以下代码例子中,直接将date类型的input标签与ng-model对应的变量绑定,会出现内存数据和页面数据不一致的问题.虽然AngularJS是双向数据绑定,但是如果用下面的方法,在页面更新date ...
- angularJS中directive与controller之间的通信
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...
- AngularJs中的directives(指令part1)
一.指令的职责 指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 ...
- AngularJS中的指令全面解析(必看)
出处: http://www.jb51.net/article/84665.htm 说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的 ...
- Angularjs 中select回显后重复选项的解决
Angularjs 中select回显后重复选项的解决 (1)Angularjs 中select回显代码,records和categoryValueList都是后台返回的 <!DOCTYPE h ...
- 如何在AngularJS中使用ng-repeat迭代键和值?
本文翻译自:How to iterate over the keys and values with ng-repeat in AngularJS? In my controller, I have ...
- 如果我有jQuery背景,那么“ AngularJS中的思考”吗? [关闭]
已关闭 . 这个问题需要更加集中 . 它当前不接受答案. 想改善这个问题吗? 更新问题,使其仅通过编辑此帖子来关注一个问题. 4年前关闭. 已锁定 . 该问题及其答案被锁定,因为该问题是题外话,但具有 ...
- AngularJS中实现无限级联动菜单(使用demo)
原文地址:http://www.cnblogs.com/front-end-ralph/p/5133122.html 昨天没来得及贴几个使用demo,今天补上,供有兴趣的同学参考 :) 1. 同步加载 ...
- angularjs 中的scope继承关系——(2)
转自:http://www.lovelucy.info/understanding-scopes-in-angularjs.html angularjs 中的scope继承关系 ng-include ...
最新文章
- 硅谷产品实战-总结:19、增长黑客的核心公式
- 多看看把,条件太多了--leetcode 93. 复原 IP 地址
- python中random中uniform怎么用_Python中的random.uniform()函数教程与实例解析
- 如何判断一条曲线是否自己相交?
- mysql jpa 批注 视图_通过JPA注解映射视图的实体类 jpa 视图 无主键 @Query注解的用法(Spring Data JPA) jpa 使用sql语句...
- 比较Spring AOP和AspectJ
- c++ 输出格式控制
- vue循环阿里巴巴矢量图标
- 微信小程序 地图实现查找标记地点
- 将本地图片生成一个网页链接(markdown)
- Ubuntu 18.04 安装Unity3d
- J.K.罗琳 哈佛大学毕业演讲
- 西北工业大学明德学院计算机老师,师资队伍结构
- 「分布式专题」分布式事务 就这?太简单了吧
- 【OpenCV 例程300篇】208. Photoshop 对比度自动调整算法
- NAS硬盘存储服务器维修,NAS存储服务器用NAS硬盘的原因有哪些?NAS存储服务器硬盘该如何选择?...
- hive 按行打印出截止日期和开始日期之间的日期
- 13.“二四六分明”与特定变格
- Rcar 3rd核间通信示意图
- 监控摄像头的拉流转发实现
热门文章
- 华擎主板bios设置图解_华硕、华擎主板升级BIOS 支持全核5GHz处理器酷睿i99900KS
- pb,json,二进制,xml数据对比
- leetcode最小面积_每日一道 LeetCode (51):盛最多水的容器
- string.find()与string::npos
- 手把手教你安装VMtools
- c++-内存管理-debug_allocator
- c++内存管理-VC6
- java 并发测试程序_java并发编程实战:第十二章---并发程序的测试
- 2分钟学会ajax 入门ajax必备
- 带left join 的sql的执行顺序