AngularJs & JQuery 结合使用存在的问题 之 input hidden 问题解决方案

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qian_meng/article/details/51319179

好长时间没写过博客啦,对不起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函数是自己封装的,并不通用,所以还是有点倾向第一种方法

猜你喜欢

转载自blog.csdn.net/qian_meng/article/details/51319179
今日推荐