angular中指令被用的最多的除了ng-repeat之外就非他莫屬了吧，由于各種業(yè)務(wù)的需求，我們經(jīng)常需要去寫一些繼承ngModel的指令，來滿足各種奇葩需求，最多的莫過于表單的驗(yàn)證啦，另外你在封裝一些jquery插件的時(shí)候，也是需要繼承ngModel的，最典型的莫過于 datepicker、fileUpload等等。

　　但是ngModel本身其實(shí)有很多坑，在這里分享給大家，如果大家又遇到其他問題，歡迎補(bǔ)充：

　　首先我們要知道一些概念的東西，這里我就不占篇幅了，不了解的可以先去看看這篇文章：

　　　　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的一個(gè)問題，那就是執(zhí)行$apply之后數(shù)據(jù)是以什么為主的

　　　　　　①viewValue?-> modelValue

　　　　　　②modelValue -> viewValue,于是我們寫了下面這個(gè)指令　　　　　　

<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("打印出更改之后，沒有執(zhí)行$apply的值")console.log(ngModelCtrl);//更改modelValue的值ngModelCtrl.$modelValue = "test change";console.info("打印出更改之后，沒有執(zhí)行$apply的值")console.log(ngModelCtrl);//執(zhí)行$apply scope.$apply();console.info("打印出更改之后，執(zhí)行$apply的值")console.log(ngModelCtrl);}) }}})

　　　　從上面的指令，我們不難得出一個(gè)比較武斷的結(jié)論 $apply會(huì)根據(jù)viewValue的值而改變modelValue的值，也就是modelValue -> viewValue，那么，我們可以開始解決我們的問題了。　　　　

　　　　　　1.viewValue想變成modelValue

　　　　　　　　這種情況很少，?但是如果你在jq的操作就可能發(fā)生這種需求，一般依然還是$apply讓model的值重新更新，使用了$apply就會(huì)觸發(fā)$render()函數(shù)，因?yàn)閙odelValue的變化，會(huì)導(dǎo)致$render觸發(fā)

　　　　　　2.modelValue想變成ViewValue　(看了上面的實(shí)驗(yàn)，我想你應(yīng)該懂了，直接使用$apply)　　　　　　　

　　　　　　3.moduleValue想和viewModel不一樣

　　　　　　　　一般情況都會(huì)使用管道去解決，但是有個(gè)其他思路可以提供給大家,下面這段代碼是在國(guó)外看到的，覺得挺不錯(cuò)的，效果大家可以去嘗試下，將model的值變成數(shù)組。

ngModelCtrl.$viewChangeListeners.push(function(){$parse(iAttrs.ngModel).assign(scope, ngModelCtrl.$viewValue.split(',')); });

　　　　第二種：管道問題

　　　　　　管道是什么呢，在ngModel里面其實(shí)就是view視圖和model視圖數(shù)據(jù)交互的時(shí)候需要經(jīng)過的數(shù)組或?qū)ο?#xff0c;這個(gè)數(shù)組或?qū)ο笥煞椒ńM成，每次經(jīng)過都會(huì)執(zhí)行數(shù)組里面的方法，并返回結(jié)果。一共有四種管道

　　　　　　$formatters ：它是model視圖轉(zhuǎn)向view視圖的管道（數(shù)組），model的值會(huì)經(jīng)過他才轉(zhuǎn)變成view視圖的值，另外它的調(diào)用順序是最特別的，從后往前調(diào)用，，越在數(shù)組后面，越早調(diào)用。

　　　　　　$parsers : 它正好是跟$formatters相反，是view視圖轉(zhuǎn)向model視圖的管道（數(shù)組），view的值會(huì)經(jīng)過他才轉(zhuǎn)變成model視圖的值，在1.2.x（兼容IE8）之前一般我們會(huì)在這里實(shí)現(xiàn)或擴(kuò)展驗(yàn)證功能

　　　　　　$validators：這是在1.3.x之后出現(xiàn)的管道（json對(duì)象），來幫助我們實(shí)現(xiàn)和擴(kuò)展驗(yàn)證功能的，當(dāng)我們進(jìn)入$parsers的同時(shí)，同時(shí)也會(huì)進(jìn)入$validators，在這里我貼段源碼（驗(yàn)證required）給大家看看，我想大家應(yīng)該能理解這個(gè)管道的功能

ctrl.$validators.required = function(modelValue, viewValue) {return !attr.required || !ctrl.$isEmpty(viewValue);};

　　　　　　$asyncValidators :功能與$validators相似，不同的是他可以實(shí)現(xiàn)異步驗(yàn)證，你可以在管道內(nèi)部執(zhí)行異步處理，會(huì)在結(jié)果返回之后，才去設(shè)置驗(yàn)證結(jié)果，這是個(gè)大課題，我看到有人討論過，我也就不詳細(xì)講了http://www.cnblogs.com/liulangmao/p/4118868.html可以進(jìn)去這個(gè)博客看看。

　　　　　　好了，ngModel的一些東西基本已將講完了，另外還有一些就不仔細(xì)去說了，我的博客里面還有一篇關(guān)于$render的詳解，有興趣的可以了解下。

　　　　　　此帖是原創(chuàng)，轉(zhuǎn)載請(qǐng)注明

轉(zhuǎn)載于:https://www.cnblogs.com/HeJason/p/5486975.html

總結(jié)

以上是生活随笔為你收集整理的angularJs中ngModel的坑的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。