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

第一個點(diǎn)，要了解下：

DOM value

$viewValue

$modelValue

scope上掛載的屬性的值

一般有2個流程:

$viewValue -->> $modelValue -->> scope 上掛載的屬性的值

scope上掛載的屬性的值 -->> $modelValue -->> $viewValue

ngModel常用的場景就是如果你使用第三方的插件例如時間插件，每次選擇時間后都是更新DOM value的值，這個時候DOM value上的值事實(shí)上是你需要綁定到scope屬性上的值。那么這個時候就需要ngModelController。

在第一個流程當(dāng)中，例如我加載了一個時間插件：pikaday

    html:
    
    

        
選擇的時間為: {{date.from}}
        
    
    
    js:
    
    angular.module("demoApp", []).controller("demoCtrl", function($scope) {
        $scope.date = {
            from: ""
        };
        
        $scope.$watch("date.from", function(val) {
            console.log(val);
        });
        
    })
        .directive("testDirective", ["$timeout", function($timeout) {
        return {
            restrict: "EA",
            require: "?ngModel",
            link: function(scope, ele, attrs, ngModel) {
            template: "",
            link: function (scope, ele, attr, ngModel) {
                var picker = new Pikaday({
                    field: $("#pikadayTimerPicker")[0],
                    firstDay: 0,
                    yearRange: [2000, 2020],
                    format: "YYYY-MM-DD",
                    hours24format : false,
                    showTime : true,
                     splitTimeView : true,
                     showSeconds : true,
                     minutesStep : 5,
                    i18n: {
                        previousMonth : "上月",
                        nextMonth     : "下月",
                        months        : ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
                        weekdays      : ["周日","周一","周二","周三","周四","周五","周六"],
                        weekdaysShort : ["日","一","二","三","四","五","六"]
                    },
                    onSelect: function () {
                        if(!ngModel) return; //如果ngModel不存在
                        ngModel.$setViewValue(this._d);
                    }
                });
            }
            }
        }
        })

在onSelect回調(diào)事件里面，調(diào)用了ngModel.$setViewValue方法，它的作用就是使DOM value -->> $viewValue -->> $modelValue -->> scope上綁定的屬性.

第二個流程當(dāng)中，比如你需要初始化一個時間，這個時間可能是從你后臺調(diào)過來的，或者是獲取的本地的時間.那么你首先要綁定scope上的屬性值，但是這個時候在時間插件上面顯示的時間并不是scope上綁定的屬性值，這個時候就需要$render方法了：

    
    $scope.data.from = $filter(new Date().valueOf())("YYYY-MM-DD hh:mm:ss");


    xxxxx
        var picker = new Picker({ xxxx });
        
        //這個地方調(diào)用
        ngModel.$render = function() {
            $("#pikadayTimerPicker").val(ngModel.$viewValue);
        }
    xxxxx

這里執(zhí)行的流程就是:
scope上綁定的屬性值發(fā)生變化 -->> $modelValue -->> $viewValue -->> 調(diào)用$("#pikadayTimerPicker").val(ngModel.$viewValue)去更新DOM value.

在2個流程當(dāng)中還應(yīng)當(dāng)注意一些地方:

第一個流程當(dāng)中會經(jīng)過$parsers, $validators2個管道。
第二個流程當(dāng)中會經(jīng)過$formatters，$render, $validators 3個管道。

關(guān)于$parses, $formatters , $validators 3個管道的用法會在下一篇里面講。

這里著重講一下源碼里的$render方法(文檔23189行)，

    ctrl.$render = function() {
    // Workaround for Firefox validation #12102.
    var value = ctrl.$isEmpty(ctrl.$viewValue) ? "" : ctrl.$viewValue;
    if (element.val() !== value) {
      element.val(value);
    }
  };

這里就是首先判斷$viewValue是否為空,然后再判斷當(dāng)前元素的DOM Value和$viewValue是否一樣，再選擇是否更新視圖。

另外就是需要注意的一個地方(文檔26947行):

    $scope.$watch(function ngModelWatch() {
    var modelValue = ngModelGet($scope); //獲取scope上綁定的ng-model的值
    
    // if scope model value and ngModel value are out of sync
    // TODO(perf): why not move this to the action fn?
    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)
    ) {
      ctrl.$modelValue = ctrl.$$rawModelValue = modelValue;
      parserValid = undefined;

      var formatters = ctrl.$formatters,
          idx = formatters.length;

      var viewValue = modelValue;
      while (idx--) {
        viewValue = formatters[idx](viewValue);
      }
        
      if (ctrl.$viewValue !== viewValue) {
        ctrl.$$updateEmptyClasses(viewValue);
        ctrl.$viewValue = ctrl.$$lastCommittedViewValue = viewValue;
        ctrl.$render();

        ctrl.$$runValidators(modelValue, viewValue, noop);
      }
    }

    return modelValue;
  });

$render方法一般是當(dāng)ng-model的值發(fā)生變化的時候就會觸發(fā):

例如ng-model直接放在input,select標(biāo)簽內(nèi)，那么ng會自動響應(yīng)ng-model變化后，便會觸發(fā)這個方法，來使Dom和$scope上掛載的屬性值保持相同.

指令內(nèi)部封裝了input標(biāo)簽，但是ng-model是在指令外部的外部標(biāo)簽下時。一般需要通過event handler去調(diào)用ngModel.$setViewValue方法去時DOM Value和scope上掛載的屬性值保持一致。具體的demo就如上例。

ngModel.$render方法是可以重新自定義的：

    ngModel.$render = function() {
        // scope上的屬性值，$modelValue, $viewValue已經(jīng)發(fā)生變化
        // 利用這些值再次可以再次做相應(yīng)的處理，然后更新DOM value
    }

抽時間把關(guān)于ngModel再補(bǔ)上。睡覺。

參考資料:

angular指令中使用ngModelController
Angular中ngModel的$render的詳解