AngularJs & JQuery 結合使用存在的問題 之 input hidden 問題解決方案

好長時間沒寫過博客啦，對不起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函數是自己封裝的，並不通用，所以還是有點傾向第一種方法