概述
ng-model-options指令用來更改ng-model等指令的默認(rèn)行為鸟妙，這個指令可以在任何位置使用挥吵，它會影響ng-model和輸入型指令以及他們的派生指令。ng-model-options指令可以被指定為一個運算式忽匈，但是這個運算式在通過Angular計算后必須得到一個Object，這個Object的屬性就是設(shè)置項丹允。
一個指令的option值是會向上計算的，比如：
<div ng-model-options="{ allowInvalid: true }">
<form ng-model-options="{ updateOn: 'blur' }">
<input ng-model-options="{ updateOn: 'default' }" />
</form>
</div>
在這段代碼中雕蔽，input元素的options屬性為：
{ allowInvalid: true, updateOn: 'default' }
實現(xiàn)細(xì)節(jié)
ng-model-options指令的基礎(chǔ)是$modelOptionsProvider。
provider的核心代碼：
var _options = extend({}, parentOptions, options);
在這個provider中批狐，最核心的代碼只有一行前塔，這行代碼實現(xiàn)了上面所說的option向上合并的功能。
在ng-model-options指令中华弓，最關(guān)鍵的部分在link中：
pre: function ngModelOptionsPreLinkFn(scope, element, attrs, ctrls) {
var optionsCtrl = ctrls[0];
var parentOptions = ctrls[1] ? ctrls[1].$options : $modelOptions;
optionsCtrl.$options = parentOptions.createChild(scope.$eval(attrs.ngModelOptions));
}
在這里會根據(jù)父option以及自己的ng-model-options屬性創(chuàng)建一個options困乒，利用的是$modelOptionsProvider提供的功能寂屏。
options默認(rèn)值:
| 屬性 | 默認(rèn)值 |
|---|---|
| updateOn | default |
| debounce | 0 |
| allowInvalid | undefined |
| getterSetter | undefined |
| timezone | undefined |
樣例代碼
<!DOCTYPE html>
<html lang="en" ng-app="app">
<!--<html>-->
<head>
<title>Test</title>
</head>
<body>
<div ng-controller="ExampleController">
<form name="userForm">
<label>
Name:
<input type="text" name="userName"
ng-model="user.name"
ng-model-options="{ updateOn: 'blur' }"
ng-keyup="cancel($event)" />
</label><br />
<label>
Other data:
<input type="text" ng-model="user.data" />
</label><br />
</form>
<pre>user.name = <span ng-bind="user.name"></span></pre>
</div>
<script src="./node_modules/angular/angular.js" type="text/javascript"></script>
<script>
angular.module('app', [])
.controller('ExampleController', ['$scope', function ($scope) {
$scope.user = { name: 'say', data: '' };
$scope.cancel = function(e) {
if (e.keyCode === 27) {
$scope.userForm.userName.$rollbackViewValue();
}
};
}]);
</script>
</body>
</html>
這段代碼修改了默認(rèn)數(shù)據(jù)更新方式凑保，在輸入焦點發(fā)生變化的時候才會把數(shù)據(jù)寫入到scope中去。
