ng-model指令

概述

ng-model指令的作用是把输入型的元素（input，select，textarea等）和scope中的数据进行绑定的作用，也可以用在自定义的form元素上。ng-model指令需要和input、select等指令进行配合使用。
同时ng-model实现了一些默认的数据校验的功能，比如：url、email等格式校验。ng-model还实现了数据状态的控制，比如：数据是否有效，是否是新数据等。如果ng-model在一个form指令中，ng-model指令会把自己的controller添加到form中去，和form建立关联，具体可以看form指令的说明。

详细说明

ng-model指令的restrict属性为'A'，所以只支持属性的方式。会依赖form指令(可选)，ng-model-option(可选)。

指令的compile

ng-model的compile实现了pre和post两个函数，在pre函数中主要进行的是把ng-model的controller添加到父form中去。核心代码为：

formCtrl.$addControl(modelCtrl);

attr.$observe('name', function(newValue) {
  if (modelCtrl.$name !== newValue) {
    modelCtrl.$$parentForm.$$renameControl(modelCtrl, newValue);
  }
});

scope.$on('$destroy', function() {
  modelCtrl.$$parentForm.$removeControl(modelCtrl);
});

这段代码主要实现的功能：
1、把model的controller添加的form的controller中去，具体实现过程在form指令中。
2、监测属性name，如果属性值发生了变化，就修改form指令中的信息。
3、在ng-model指令销毁的时候删除form指令中的信息。

在post部分实现了对多个消息的监听，代码为：

if (modelCtrl.$options.getOption('updateOn')) {
  element.on(modelCtrl.$options.getOption('updateOn'), function(ev) {
     modelCtrl.$$debounceViewValueCommit(ev && ev.type);
  });
}

element.on('blur', function() {
  if (modelCtrl.$touched) return;

  if ($rootScope.$$phase) {
    scope.$evalAsync(modelCtrl.$setTouched);
  } else {
    scope.$apply(modelCtrl.$setTouched);
  }
});

在这里主要进行了两个过程：
1、监听ng-model-option中updateOn指定的消息，调用model controller的方法，进行数据更新。
2、监听blur消息，会调用$apply或者$evalAsync方法进行页面更新。

指令的controller

在controller中定义了很多个方法:

方法	说明
$$initGetterSetters	初始化get和set方法，需要和option配合使用
$render	默认是空函数
$isEmpty	判断一个值是不是空的
$$updateEmptyClasses	更新是否为empty的css类，设置ng-empty和ng-not-empty类
$setPristine	标记数据是新的，删除ng-dirty类，添加ng-pristine类
$setDirty	标记数据被修改过，和$setPristine刚好相反，会调用父form的$setDirty
$setUntouched	标记为未触摸状态，会设置ng-untouched类
$setTouched	和$setUntouched刚好相反
$rollbackViewValue	数据回滚
$validate	重新计算数据的有效性,受option的allowInvalid属性影响
$$runValidators	直接运行有效性判断
$commitViewValue	提交数据到scope
$$parseAndValidate	解析数据，然后判断有效性，如果有效就会添加到scope中去
$$writeModelToScope	把model中的数据写入scope中去
$setViewValue	设置view里的值
$$debounceViewValueCommit	默认数据提交函数

最后controller中还添加了数据监控：

$scope.$watch(function ngModelWatch() {
   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?
   if (modelValue !== ctrl.$modelValue &&
      // checks for NaN is needed to allow setting the model to NaN when there's an asyncValidator
       // eslint-disable-next-line no-self-compare
      (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();

       // It is possible that model and view value have been updated during render
       ctrl.$$runValidators(ctrl.$modelValue, ctrl.$viewValue, noop);
     }
   }

   return modelValue;
 });

在这段代码中主要干的事情：
1、获取ng-model绑定的值
2、根据$formatters属性指定的内容进行数据格式化，所有的格式化函数都会被迭代执行。
3、更新数据，包括更新class，运行有效性校验等。

样例代码

    




    Update input to see transitions when valid/invalid.
    Integer is a valid value.


    

这段代码实现了对输入数据进行绑定、格式校验的功能。