資訊專欄INFORMATION COLUMN
摘要：我們下面來(lái)看看的源碼這是其中一個(gè)，在不同的指令下的代碼都不太一樣，但是其作用基本一致，但是從這里我們就可以看出的到底在干什么事了。
這篇文章是我兩年前在博客園寫(xiě)的,現(xiàn)在移植過(guò)來(lái),不過(guò)Angular 1.x 在國(guó)內(nèi)用的人已經(jīng)不多了,希望能幫助到有需要的人
在我開(kāi)始著手 ngModel 的領(lǐng)域時(shí)候，有一個(gè)問(wèn)題很令我糾結(jié)，那就是 $render 到底是做什么的呢？查了很多資料都只是簡(jiǎn)單的描述一下，這就令我很糾結(jié)了，終于在一個(gè)陽(yáng)光明媚的晚上，我終于解決了這個(gè)大問(wèn)題
那么這個(gè) $render 方法到底是干什么的呢？他的用處就是在 $viewValue 改變的時(shí)候可以重新綁定 model 數(shù)據(jù)，但是我們要注意一點(diǎn)( $viewValue 和 DOM 節(jié)點(diǎn)的 value 是不同的)，我覺(jué)得他們的區(qū)別有點(diǎn)類似 setTimeout 和 $timeout 的區(qū)別，但是又不太一樣。PS:其實(shí) modelValue 和綁定的數(shù)據(jù)也可以不同
Input里面模型的值：{{vm.modelTest}}
.directive("modelRender",
function () {
return {
require: "ngModel",
link: function (scope, iElm, iAttrs, ngModelCtrl) {
iElm.on("mouseenter", function () {
//嘗試注釋
iElm.val(1);
console.log(ngModelCtrl);
//嘗試注釋
ngModelCtrl.$setViewValue(11);
console.log(ngModelCtrl);
//嘗試注釋
ngModelCtrl.$render();
console.log(ngModelCtrl);
})
}
}
}
)
我們分幾種情況分析
這是鼠標(biāo)沒(méi)有經(jīng)過(guò)指令的時(shí)候的樣子
1.當(dāng)我們使用 js 原生方法設(shè)置 input 的 val 值的時(shí)候，并且不執(zhí)行 $render 函數(shù)，我們可以看到 input 里面的 model 值是沒(méi)有變化的，但是 input 的的 value 是變成了 1，而且我們看到不僅 model 值沒(méi)有變化，ngModel 的 $viewValue 和 $modelValue 同樣也沒(méi)有變化。我們可以得出結(jié)論 (input 的 value 值不一定等于 $viewValue)
結(jié)果是這樣的
然后，我們嘗試在執(zhí)行 js 原生改變 value 值之后，執(zhí)行 $render 函數(shù)是個(gè)什么樣的狀況，
看完上面的實(shí)驗(yàn)之后我們發(fā)現(xiàn) input 的 value 值并沒(méi)有發(fā)生變化，也就是說(shuō) js 原生改變 input 的 value 值是無(wú)效的，那么在這里我們就可以看到 $render 的功能了。
我們可以大膽的預(yù)計(jì) $render 的功能跟 $apply 的功能是一致的，我們?cè)谏弦徽轮v過(guò)，$apply 是以 viewValue 為主，讓 modelValue 變成 viewValue，也就是 modelValue -> viewValue，那么 $render 是不是以 modelValue 為主，讓 viewValue->modelValue 呢？
2.接下來(lái)我們嘗試，使用 ng 原生改變 也就是說(shuō) $setviewValue,是如何表現(xiàn)的呢？
現(xiàn)在我們注釋掉 js 原生改變 value 的方法，而去使用 $setViewValue，并且不執(zhí)行 $render 函數(shù)，直接上結(jié)果，我們看到，執(zhí)行完 $setViewValue 之后，無(wú)論是 viewValue 和 modelValue 都是已經(jīng)同步了，但是 input 里面的值卻依然是 test,在這里我們?cè)俅悟?yàn)證了那個(gè)說(shuō)法( $viewValue 和 DOM 節(jié)點(diǎn)的 value 是不同的)
現(xiàn)在我們?cè)?$setViewValue 之后使用，$render() 看看是什么效果，
大家發(fā)現(xiàn)了吧，$render 的功能和 $apply 的功能極為相似，但是是不是很多人在講 $render 的時(shí)候，都會(huì)說(shuō) model 同步到 view，我覺(jué)得這個(gè)說(shuō)法不太對(duì)，我測(cè)試過(guò)在 click 事件用非常規(guī)手段改變 controller 中 model 的值，發(fā)現(xiàn)就算 controller 的值已經(jīng)改變了，但是 ngModel 的值無(wú)論是 viewValue 還是 modelValue 都沒(méi)有變化，然后嘗試用 $modelValue 的屬性強(qiáng)行改變$modelValue，結(jié)果還是沒(méi)作用。我們下面來(lái)看看 $render 的源碼
ctrl.$render = function() {
element.val(ctrl.$isEmpty(ctrl.$viewValue) ? "" : ctrl.$viewValue);
};
這是其中一個(gè)，$render 在不同的指令下的代碼都不太一樣，但是其作用基本一致，但是從這里我們就可以看出 $render 的到底在干什么事了。那么 $render 什么時(shí)候觸發(fā)呢？其實(shí)看你自己想什么時(shí)候調(diào)用它，你可以覆蓋他的方法，重寫(xiě)，在 $watch 也好，$viewChange 也好。默認(rèn)的觸發(fā)事件一些特別 input 的 value 改變的時(shí)候例如單選，還有 rollbackView()的時(shí)候
另外一個(gè)真正體現(xiàn) $render 執(zhí)行事件的源代碼在這里，里面我寫(xiě)了注釋，大家應(yīng)該都能懂,好了，$render 就已經(jīng)講完了
$scope.$watch(function ngModelWatch() {
//解析ngModel的表達(dá)式，獲取內(nèi)容
var modelValue = ngModelGet($scope);
// if scope model value and ngModel value are out of sync
// TODO(perf): why not move this to the action fn?
//判斷表達(dá)式的值是否跟modelValue一致
if (modelValue !== ctrl.$modelValue &&
// checks for NaN is needed to allow setting the model to NaN when there"s an asyncValidator
(ctrl.$modelValue === ctrl.$modelValue || modelValue === modelValue)
) {
//更新modelValue的值
ctrl.$modelValue = ctrl.$$rawModelValue = modelValue;
parserValid = undefined;
//獲取管道信息
var formatters = ctrl.$formatters,idx = formatters.length;
var viewValue = modelValue;
while (idx--) {
viewValue = formatters[idx](viewValue);
}
//如果viewValue和ModelValue不一致
if (ctrl.$viewValue !== viewValue) {
ctrl.$viewValue = ctrl.$$lastCommittedViewValue = viewValue;
ctrl.$render();
ctrl.$$runValidators(modelValue, viewValue, noop);
}
}
//返回解析的表達(dá)式
return modelValue;
});
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/92914.html
摘要：關(guān)于個(gè)管道的用法會(huì)在下一篇里面講。一般需要通過(guò)去調(diào)用方法去時(shí)和上掛載的屬性值保持一致。方法是可以重新自定義的上的屬性值，已經(jīng)發(fā)生變化利用這些值再次可以再次做相應(yīng)的處理，然后更新抽時(shí)間把關(guān)于再補(bǔ)上。參考資料指令中使用中的的詳解 第一個(gè)點(diǎn)，要了解下： DOM value $viewValue $modelValue scope上掛載的屬性的值 一般有2個(gè)流程: $vie...
摘要：為了簡(jiǎn)單起見(jiàn)，在本文中將會(huì)使用。已經(jīng)實(shí)例化了并且將它的模板載入到了元素中。中的依賴注入發(fā)生在該類的構(gòu)造函數(shù)中，因此我們將在構(gòu)造函數(shù)中注入。 國(guó)內(nèi) Angular2 資料比較少，這里看到一篇不錯(cuò)的入門文章就分享過(guò)來(lái)了 —— Angular 2 快速上手，這里面還有很多有關(guān)于 Angular2 的文章，感興趣的朋友可以去看一看 目前angular2已經(jīng)來(lái)到了beta版，這意味著它已經(jīng)做好了...
摘要：可以在不必打斷其它業(yè)務(wù)的前提下，升級(jí)應(yīng)用程序，因?yàn)檫@項(xiàng)工作可以多人協(xié)作完成，在一段時(shí)間內(nèi)逐漸鋪開(kāi)，下面就方案展開(kāi)說(shuō)明主要依賴提供模塊。在混合式應(yīng)用中，我們同時(shí)運(yùn)行了兩個(gè)版本的。這意味著我們至少需要和各提供一個(gè)模塊。 angular1.x 升級(jí) angular2+ 方案 我給大家提供的是angular1.x和angular5并行，增量式升級(jí)方案，這樣大家可以循序漸進(jìn)升級(jí)自己的應(yīng)用，不想看...
摘要：但實(shí)際上這時(shí)程序并沒(méi)有計(jì)算手續(xù)費(fèi)。經(jīng)過(guò)排查并查閱文檔之后，發(fā)現(xiàn)是的問(wèn)題。本文沒(méi)有具體介紹和管道，關(guān)于這部分可以參考文中給出的鏈接 事情起源于在項(xiàng)目中遇到的一個(gè)小問(wèn)題：項(xiàng)目中需要一個(gè)輸入框輸入賣出產(chǎn)品數(shù)量，并且在用戶輸入后根據(jù)輸入數(shù)據(jù)計(jì)算手續(xù)費(fèi)。很自然的我用了ng-model和ng-change，并且一般情況下沒(méi)什么問(wèn)題。問(wèn)題是：輸入框下還有一個(gè)按鈕是全部賣出，點(diǎn)擊這個(gè)按鈕程序會(huì)自動(dòng)設(shè)置...
摘要：技術(shù)棧概述大名，顧名思義是在年月正式發(fā)布的一套標(biāo)準(zhǔn)。小名，意為第六次變更。本項(xiàng)目，選擇的是的推薦配置，唯一注意的是全局變量中把的關(guān)鍵詞加上。項(xiàng)目結(jié)構(gòu)公共組件目錄，放一些二次封裝的等等片段式的。項(xiàng)目的公用樣式目錄。 技術(shù)棧概述 ES2015(ES6) 大名ES2015，顧名思義是 ECMAScript 在2015年6月正式發(fā)布的一套標(biāo)準(zhǔn)。小名ES6，意為ECMAScript第六次變更。（...
閱讀 1695·2021-10-27 14:13
閱讀 1968·2021-10-11 10:59
閱讀 3449·2021-09-24 10:26
閱讀 1987·2019-08-30 12:48
閱讀 3109·2019-08-30 12:46
閱讀 2096·2019-08-30 11:16
閱讀 1488·2019-08-30 10:48
閱讀 2859·2019-08-29 16:54
