成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Angular1.x中ngModel的$render的詳解

Euphoria / 523人閱讀

摘要：我們下面來看看的源碼這是其中一個(gè)，在不同的指令下的代碼都不太一樣，但是其作用基本一致，但是從這里我們就可以看出的到底在干什么事了。

這篇文章是我兩年前在博客園寫的,現(xiàn)在移植過來,不過Angular 1.x 在國(guó)內(nèi)用的人已經(jīng)不多了,希望能幫助到有需要的人

在我開始著手 ngModel 的領(lǐng)域時(shí)候，有一個(gè)問題很令我糾結(jié)，那就是 $render 到底是做什么的呢？查了很多資料都只是簡(jiǎn)單的描述一下，這就令我很糾結(jié)了，終于在一個(gè)陽光明媚的晚上，我終于解決了這個(gè)大問題

那么這個(gè) $render 方法到底是干什么的呢？他的用處就是在 $viewValue 改變的時(shí)候可以重新綁定 model 數(shù)據(jù)，但是我們要注意一點(diǎn)( $viewValue 和 DOM 節(jié)點(diǎn)的 value 是不同的)，我覺得他們的區(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)沒有經(jīng)過指令的時(shí)候的樣子

1.當(dāng)我們使用 js 原生方法設(shè)置 input 的 val 值的時(shí)候，并且不執(zhí)行 $render 函數(shù)，我們可以看到 input 里面的 model 值是沒有變化的，但是 input 的的 value 是變成了 1，而且我們看到不僅 model 值沒有變化，ngModel 的 $viewValue 和 $modelValue 同樣也沒有變化。我們可以得出結(jié)論 (input 的 value 值不一定等于 $viewValue)

結(jié)果是這樣的

然后，我們嘗試在執(zhí)行 js 原生改變 value 值之后，執(zhí)行 $render 函數(shù)是個(gè)什么樣的狀況，


看完上面的實(shí)驗(yàn)之后我們發(fā)現(xiàn) input 的 value 值并沒有發(fā)生變化，也就是說 js 原生改變 input 的 value 值是無效的，那么在這里我們就可以看到 $render 的功能了。

我們可以大膽的預(yù)計(jì) $render 的功能跟 $apply 的功能是一致的，我們?cè)谏弦徽轮v過，$apply 是以 viewValue 為主，讓 modelValue 變成 viewValue，也就是 modelValue -> viewValue，那么 $render 是不是以 modelValue 為主，讓 viewValue->modelValue 呢？

2.接下來我們嘗試，使用 ng 原生改變 也就是說 $setviewValue,是如何表現(xiàn)的呢？

現(xiàn)在我們注釋掉 js 原生改變 value 的方法，而去使用 $setViewValue，并且不執(zhí)行 $render 函數(shù)，直接上結(jié)果，我們看到，執(zhí)行完 $setViewValue 之后，無論是 viewValue 和 modelValue 都是已經(jīng)同步了，但是 input 里面的值卻依然是 test,在這里我們?cè)俅悟?yàn)證了那個(gè)說法( $viewValue 和 DOM 節(jié)點(diǎn)的 value 是不同的)

現(xiàn)在我們?cè)?$setViewValue 之后使用，$render() 看看是什么效果，

大家發(fā)現(xiàn)了吧，$render 的功能和 $apply 的功能極為相似，但是是不是很多人在講 $render 的時(shí)候，都會(huì)說 model 同步到 view，我覺得這個(gè)說法不太對(duì)，我測(cè)試過在 click 事件用非常規(guī)手段改變 controller 中 model 的值，發(fā)現(xiàn)就算 controller 的值已經(jīng)改變了，但是 ngModel 的值無論是 viewValue 還是 modelValue 都沒有變化，然后嘗試用 $modelValue 的屬性強(qiáng)行改變$modelValue，結(jié)果還是沒作用。我們下面來看看 $render 的源碼

ctrl.$render = function() {
  element.val(ctrl.$isEmpty(ctrl.$viewValue) ? "" : ctrl.$viewValue);
};

這是其中一個(gè)，$render 在不同的指令下的代碼都不太一樣，但是其作用基本一致，但是從這里我們就可以看出 $render 的到底在干什么事了。那么 $render 什么時(shí)候觸發(fā)呢？其實(shí)看你自己想什么時(shí)候調(diào)用它，你可以覆蓋他的方法，重寫，在 $watch 也好，$viewChange 也好。默認(rèn)的觸發(fā)事件一些特別 input 的 value 改變的時(shí)候例如單選，還有 rollbackView()的時(shí)候

另外一個(gè)真正體現(xiàn) $render 執(zhí)行事件的源代碼在這里，里面我寫了注釋，大家應(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://m.hztianpu.com/yun/92914.html

相關(guān)文章

  • ngModel使用說明小demo

    摘要：關(guān)于個(gè)管道的用法會(huì)在下一篇里面講。一般需要通過去調(diào)用方法去時(shí)和上掛載的屬性值保持一致。方法是可以重新自定義的上的屬性值，已經(jīng)發(fā)生變化利用這些值再次可以再次做相應(yīng)的處理，然后更新抽時(shí)間把關(guān)于再補(bǔ)上。參考資料指令中使用中的的詳解 第一個(gè)點(diǎn)，要了解下： DOM value $viewValue $modelValue scope上掛載的屬性的值 一般有2個(gè)流程: $vie...

    zorro 評(píng)論0 收藏0

  • Angular 2 快速上手

    摘要：為了簡(jiǎn)單起見，在本文中將會(huì)使用。已經(jīng)實(shí)例化了并且將它的模板載入到了元素中。中的依賴注入發(fā)生在該類的構(gòu)造函數(shù)中，因此我們將在構(gòu)造函數(shù)中注入。 國(guó)內(nèi) Angular2 資料比較少，這里看到一篇不錯(cuò)的入門文章就分享過來了 —— Angular 2 快速上手，這里面還有很多有關(guān)于 Angular2 的文章，感興趣的朋友可以去看一看 目前angular2已經(jīng)來到了beta版，這意味著它已經(jīng)做好了...

    singerye 評(píng)論0 收藏0

  • angular1.x和angular2+并行，angular1.x 升級(jí) angular2+方案

    摘要：可以在不必打斷其它業(yè)務(wù)的前提下，升級(jí)應(yīng)用程序，因?yàn)檫@項(xiàng)工作可以多人協(xié)作完成，在一段時(shí)間內(nèi)逐漸鋪開，下面就方案展開說明主要依賴提供模塊。在混合式應(yīng)用中，我們同時(shí)運(yùn)行了兩個(gè)版本的。這意味著我們至少需要和各提供一個(gè)模塊。 angular1.x 升級(jí) angular2+ 方案 我給大家提供的是angular1.x和angular5并行，增量式升級(jí)方案，這樣大家可以循序漸進(jìn)升級(jí)自己的應(yīng)用，不想看...

    Olivia 評(píng)論0 收藏0

  • angular1學(xué)習(xí)筆記，view model 的同步過程

    摘要：但實(shí)際上這時(shí)程序并沒有計(jì)算手續(xù)費(fèi)。經(jīng)過排查并查閱文檔之后，發(fā)現(xiàn)是的問題。本文沒有具體介紹和管道，關(guān)于這部分可以參考文中給出的鏈接 事情起源于在項(xiàng)目中遇到的一個(gè)小問題：項(xiàng)目中需要一個(gè)輸入框輸入賣出產(chǎn)品數(shù)量，并且在用戶輸入后根據(jù)輸入數(shù)據(jù)計(jì)算手續(xù)費(fèi)。很自然的我用了ng-model和ng-change，并且一般情況下沒什么問題。問題是：輸入框下還有一個(gè)按鈕是全部賣出，點(diǎn)擊這個(gè)按鈕程序會(huì)自動(dòng)設(shè)置...

    Forelax 評(píng)論0 收藏0

  • webpack+es6+angular1.x項(xiàng)目構(gòu)建

    摘要：技術(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第六次變更。（...

    KoreyLee 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<