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

Posted 2022-11-09 小向光

现在项目前端框架在向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赋值，然后俩种调用方式

$("#userName").val("qianmeng").trigger("change");
$("#userName").update("qianmeng");

想了下，既然俩种方法都可以实现预期效果，但毕竟update函数是自己封装的，并不通用，所以还是有点倾向第一种方法。