Page 52 - AngularJS权威教程

32 第 7 章 过滤器

如果验证失败，这个属性的值为true；如果值为false，说明输入字段的值通过了验证。
10. 一些有用的CSS样式

AngularJS处理表单时，会根据表单当前的状态添加一些CSS类（例如当前是合法的、未发生
变化的，等等），这些CSS类的命名和前面介绍的属性很相似。
它们包括：

.ng-pristine {}
.ng-dirty {}
.ng-valid {}
.ng-invalid {}
它们对应着表单输入字段的特定状态。

当某个字段中的输入非法时，.ng-invlid类会被添加到这个字段上。当前例子中的站点将
对应的CSS样式设置为：

input.ng-invalid {
border: 1px solid red;
}
input.ng-valid {
border: 1px solid green;
}

 $parsers
当用户同控制器进行交互，并且ngModelController中的$setViewValue()方法被调用时，
$parsers数组中的函数会以流水线的形式被逐个调用。第一个$parse被调用后，执行结果会传
递给第二个$parse，以此类推。

这些函数可以对输入值进行转换，或者通过$setValidity()函数设置表单的合法性。
使用$parsers数组是实现自定义验证的途径之一。例如，假设我们想要确保输入值在某两个
数值之间，可以在$parsers数组中入栈一个新的函数，这个函数会在验证链中被调用。
每个$parser返回的值都会被传入下一个$parser中。当不希望数据模型发生更新时返回
undefined。

angular.module('myApp')
.directive('oneToTen', function() {
return {
require: '?ngModel',
link: function(scope, ele, attrs, ngModel) {
if (!ngModel) return;
ngModel.$parsers.unshift(
function(viewValue) {
var i = parseInt(viewValue);

if (i >= 0 && i < 10) {
ngModel.$setValidity('oneToTen', true);
return viewValue;
} else {
ngModel.$setValidity('oneToTen', false);
return undefined;
}