标签：style blog color io 数据 for ar cti
angular 提供了表单指令，它和ng-model会有很密切的互动。
我们先来了解一下基本的ng-model
ng-model 通常放在input上，用来同步elem & scope 的数据
ng-model 在不同的element上会有不同的同步模式，这些angular已经帮我封装了许多 .
ng-model这个指令也提供了一些扩张接口 ，这个指令的controller 名为 ngModel
如果我们想在数据同步间做一些拦截，我们可以添加一个自定义指令来实现
<div ng-app="myApp">
<div ng-controller="ctrl">
<input type="text" ng-model="name" test />
</div>
</div>
angular.module("myApp", []).
directive("test", [function () {
return {
restrict: "A",
link: function ($scope, $element, $attrs, ctrls) {
ctrls.$formatters.unshift(function (value) {
console.log(value);
return value + "123";
});
ctrls.$formatters.unshift(function (value) {
console.log(value);
return value + "456";
});
ctrls.$parsers.push(function (value) {
console.log(value);
return value;
});
},
require : "ngModel"
}
}]).
controller("ctrl", ["$scope", function ($scope) {
$scope.name = "keatkeat";
}]);
通过require 引入 ng-model的controller到link中 , 调用 ctrl.$formatter 是个List<Fn> ，model 在同步数据时会逐一逆序(我也不知道为什么是逆序)调用里面的方法来处理value最终同步进input, (scope -> element) , 因为逆序所以我们放入时用了unshift
ctrl.$parsers 则相反 (element -> scope)
此外 ng-model 还有一些基本 option 可以调
<input type="text" name="userName" ng-model="user.name" ng-model-options="{ updateOn: ‘blur‘, debounce: 1000 ,getterSetter: true }"/><br />
<pre>user.name = <span ng-bind="user.name()"></span></pre>updateOn 写入一个事件名来表示我们希望什么事件促使这个elem被更新，比如 blur / keyup 等
debounce 是deley update 毫秒, 一般我们不希望用户联系每一次keydown时都更新，而是等到用户停止输入时才执行一次更新。就可以放一个delay 实现了
getterSetter = true 可以用在依赖属性上，比如我们的$scope.name = function (){ retrun xx; } 当name是个方法的时候
标签：style blog color io 数据 for ar cti
原文地址：http://www.cnblogs.com/keatkeat/p/3912530.html
