概述
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，运行有效性校验等。
样例代码
<!DOCTYPE html>
<html lang="en" ng-app="app">
<!--<html>-->
<head>
<title>Test</title>
</head>
<body>
<style>
.my-input {
transition:all linear 0.5s;
background: transparent;
}
.my-input.ng-invalid {
color:white;
background: red;
}
</style>
<p id="inputDescription">
Update input to see transitions when valid/invalid.
Integer is a valid value.
</p>
<form name="testForm" ng-controller="ExampleController">
<input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input"
aria-describedby="inputDescription" />
</form>
<script src="./node_modules/angular/angular.js" type="text/javascript"></script>
<script>
angular.module('app', [])
.controller('ExampleController', ['$scope', function ($scope) {
$scope.val = '1';
}]);
</script>
</body>
</html>
这段代码实现了对输入数据进行绑定、格式校验的功能。
网友评论