根据我自己阅读和检查的内容，我对 AngularJS + 自定义验证有一些疑问：
- AngularJS 为简单的字段验证（ng-require，...）提供了很好的帮助。
- 实现单个字段自定义验证的最佳方式是通过指令（不污染控制器）。
当我们有影响多个文件的自定义业务验证时，我会产生疑问。让我们检查以下简单场景：
- 我们正在编辑航班到达状态，字段：状态（着陆/预定/延误），评论（关于航班状态的其他信息）。
我要应用的业务验证是：仅当状态字段值为“延迟”时才需要注释字段。
我实现它的方式：
- 定义一个指令来处理 Status + Comments 字段的变化（状态通过 $watch）。
该指令将业务验证委托给服务
我认为这种方法给我的好处是：
我的业务服务验证被隔离了。
我可以轻松地将单元测试添加到该业务验证中。
我可以重复使用它，它不依赖于 UI 元素。
我已经在 JSFiddle（JSFiddle 验证示例）中编译了这个示例。
JS：
function MyCtrl($scope) {
$scope.arrival = {
"id": 1,
"originAirport": "Malaga (AGP)",
"flightNumber": "Iberia 132",
"dueAt": "2013-05-26T12:10:10",
"status": 2,
"info": "test"
}
}
myApp.directive('validateinfofield', ['formArrivalValidation', function (formArrivalValidation) {
return {
require: "ngModel",
link: function(scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue){
// Empty? Let's check status
//if (!viewValue.length && scope.arrival.status == 3) {
if(formArrivalValidation.validateInfoField(scope.arrival.status, viewValue)) {
ctrl.$setValidity('validInfo', true);
} else {
ctrl.$setValidity('validInfo', false);
}
});
// Let's add a watch to arrival.status if the values change we need to
// reevaluate, if comments is empty and status is delayes display error
scope.$watch('arrival.status', function (newValue, oldValue) {
if (formArrivalValidation.validateInfoField(newValue, scope.editArrivalForm.txInfo.$viewValue)) {
ctrl.$setValidity('validInfo', true);
} else {
ctrl.$setValidity('validInfo', false);
}
});
}
};
}]);
// Validation Service, limited to our "business language"
myApp.factory('formArrivalValidation',
function () {
return {
validateInfoField: function (status, infoField) {
var isOk = true;
if (status == 3) {
if (infoField == undefined) {
isOk = false;
} else {
if (!infoField.length)
isOk = false;
}
}
return isOk;
},
};
});
这是一个很好的方法吗？有没有更好更简单的方法来实现这一目标？