AngularJs & JQuery 结合使用存在的问题 之 input hidden 问题解决方案
来源:互联网 发布:linux cat 显示文件名 编辑:程序博客网 时间:2024/06/02 03:04
好长时间没写过博客啦,对不起CSDN给的‘恒’标签啦,嘿嘿
现在项目前端框架在向Angularjs转变,但里面还是在继续使用JQuery,当然这样是肯定不合理的,搜了下相关说法,AngualrJs 是不建议和JQuery结合使用的(虽然Angularjs自带JQLite),但项目原因,暂时就是这俩东西结合使用,具体原因不讨论,只讨论结合存在的问题,我相信不只我们项目遇到这种情况~~~
首先现在要解决的主要问题:
使用JQuery的赋值方法对ng-model 所在input赋值是不起作用的
之前也搜过类似的问题,结果大都是使用 ng-value ,ng-init,{{ }} 等等,但这些都是只是针对静态值处理,一旦我需要使用JQuery对ng-model所在的input进行赋值,ng-model照样不会变化,后来解决Angularjs结合日期控件LayDate的处理方法时注意到了指令这个东西,顺带着又看到了N多指令解决JQuery插件和Angularjs结合使用的例子,后来才发现指令的向ng-model、ng-value这都属于基本指令,其他的指令只是自定义罢了,学习不深入真可怕~~~通过这些主要是想说既然JQuery插件在赋值到input的时候都可以改变ng-model中的值,小小的hidden又有什么,于是想自己写一个指令来实现,无意中就搜到的了相关代码
.directive('ngUpdateHidden',function() { return function(scope, el, attr) { var model = attr['ngModel']; scope.$watch(model, function(nv) { el.val(nv); }); };}
不难看出,这是另一端,是Angularjs中model改变时,动态改变hidden中的值,正好相反,实现原理就是利用$watch监听model值的变化。虽然不是我想要的结果,但想一下,既然可以监听model的值,然后改变hidden的值,那我就实现监听hidden的值,然后去 改变model就是咯,监听dom元素改变的方法都是现成的onchange()嘛,刚想写,又搜到的相关代码
.directive('ngUpdateHidden', function () { return { restrict: 'AE', //attribute or element scope: {}, replace: true, require: 'ngModel', link: function ($scope, elem, attr, ngModel) { $scope.$watch(ngModel, function (nv) { elem.val(nv); }); elem.change(function () { //bind the change event to hidden input $scope.$apply(function () { ngModel.$setViewValue( elem.val()); }); }); } };})
以上就是我说的完美实现
于是很开心,赶紧去尝试先:
< input type="hidden" id="userName" ng-model="userName" ng-update-hidden />
然后动态赋值:
$("#userName").val("qianmeng");
结果一脸懵逼~~~
发现val()方法赋值,根本不会触发onchange()事件
也就是说我只要赋值的时候让它触发change事件就结束啦:
$("#userName").val("qianmeng").trigger("change");
成功了~~~
但感觉这样并不通用,如果能直接val(”“)不要处理额外的东西,岂不是更好,也就是说只要封装下JQuery赋值的时候自动调用下change事件就可以了
(function($) { $.fn.update = function(value){ $(this).each(function(){ if(value!=this.value){ this.value = value; this.onchange(); } }); };})(jQuery);
然后使用
$("#userName").update("qianmeng");
这边只要使用封装后的update方法就可以实现了
总结,首先要写个指令,在数据变化时给ng-model赋值,然后俩种调用方式
1、$("#userName").val("qianmeng").trigger("change");2、$("#userName").update("qianmeng");
想了下,既然俩种方法都可以实现预期效果,但毕竟update函数是自己封装的,并不通用,所以还是有点倾向第一种方法
- AngularJs & JQuery 结合使用存在的问题 之 input hidden 问题解决方案
- angularjs的SEO问题解决方案
- <input type="hidden">的问题
- Jquery选择器input:hidden和input[type=hidden]的区别
- JQuery不能获得input 中hidden类型的值
- Jquery ajaxSubmit()使用案例以及遇到的问题解决方案
- AngularJS+asp.net的结合使用
- AngularJS结合dateTimePicker的使用-指令
- 将BootstrapJS和AngularJS结合使用以及为什么不用jQuery
- 基于springMVC与angularJS的跨域问题解决方案
- ecshop与jquery的冲突问题解决方案
- AngularJS之input指令
- input 和<fmt:formatDate>的结合使用
- input 和<fmt:formatDate>的结合使用
- android zxing 库与tabActivity结合的问题解决方案
- Angularjs input 使用onkeyup无法更新ng-model值的问题
- jquery 更改angularJS input 内容导致绑定失效的解决办法
- Jquery+AJAX的结合使用
- java 正则表达式去除标点符号
- Swift 仿简书、淘宝App的弹出view效果
- Spark 定制版:001~Spark Streaming(一)
- 回文链表之程序员面试经典
- 边双连通 练习
- AngularJs & JQuery 结合使用存在的问题 之 input hidden 问题解决方案
- android-Ultra-Pull-To-Refresh/SwipeRefreshLayout嵌套ViewPager/ScrollView滑动冲突解决
- JSP 9对象
- 往服务器发送自定义的对象
- lightoj 1030 Discovering Gold
- Oracle完全卸载详细步骤
- 读冯志伟老前辈的《自然语言处理与现状》
- 自己动手研发P2P功能的IPC摄像头
- java 处理CSV(分号里面有逗号)