当页面首次加载和表单提交时，控制器两次触发 $scope 上定义的方法时出现问题。
这是小提琴：http: //jsfiddle.net/scabro/pQb6q/5/
<div data-ng-app="app" data-ng-controller="AppCtrl">
<form method="post" data-ng-submit="submitForm()">
<span data-ng-show="showWarning('email')">Please provide valid email address</span>
<input type="email" name="email" placeholder="Email address" data-ng-model="fields.email.value" />
<span data-ng-show="showWarning('telephone')">Please provide your telephone number</span>
<input type="text" name="telephone" placeholder="Telephone" data-ng-model="fields.telephone.value" />
<span data-ng-show="showWarning('name')">Please provide your name</span>
<input type="text" name="name" placeholder="Name" data-ng-model="fields.name.value" />
<button type="submit">Submit</button>
</form>
</div>
这里有两个 AngularJs 模块——第一个带有控制器，另一个带有“isValid”工厂服务
angular.module('app', ['validation'])
.controller('AppCtrl', function($scope, $log, isValid) {
$scope.fields = {
email : {
type : 'email',
value : '',
required : true
},
telephone : {
type : 'number',
value : '',
required : true
},
name : {
type : 'string',
value : '',
required : true
}
};
$scope.warnings = [];
$scope.showWarning = function(field) {
$log.info($scope.warnings);
return ($scope.warnings.indexOf(field) !== -1);
};
$scope.submitForm = function() {
$scope.warnings = [];
isValid.run($scope.fields);
if (isValid.errors.length > 0) {
$scope.warnings = isValid.errors;
}
};
});
angular.module('validation', [])
.factory('isValid', function() {
return {
errors : [],
isEmail : function(emailValue) {
return (
emailValue.indexOf("@") != -1
);
},
isNumber : function(numberValue) {
return (
!isNaN(parseFloat(numberValue)) &&
isFinite(numberValue)
);
},
isEmpty : function(emptyValue) {
return (
emptyValue === '' ||
emptyValue === 'undefined'
);
},
validateEmail : function(fieldObject, fieldName) {
if (!this.isEmail(fieldObject.value)) {
this.errors.push(fieldName);
}
},
validateNumber : function(fieldObject, fieldName) {
if (!this.isNumber(fieldObject.value)) {
this.errors.push(fieldName);
}
},
validateEmpty : function(fieldObject, fieldName) {
if (this.isEmpty(fieldObject.value)) {
this.errors.push(fieldName);
}
},
type : function(fieldObject, fieldName) {
switch(fieldObject.type) {
case 'email':
if (fieldObject.required || !this.isEmpty(fieldObject.value)) {
this.validateEmail(fieldObject, fieldName);
}
break;
case 'number':
if (fieldObject.required || !this.isEmpty(fieldObject.value)) {
this.validateNumber(fieldObject, fieldName);
}
break;
default:
if (fieldObject.required) {
this.validateEmpty(fieldObject, fieldName);
}
break;
}
},
resetErrors : function() {
this.errors = [];
},
run : function(fields) {
this.resetErrors();
for (var fieldName in fields) {
if (fields.hasOwnProperty(fieldName)) {
this.type(fields[fieldName], fieldName);
}
}
}
};
});
另外 - 由于某种原因，验证仅适用于前 2 个字段，并且似乎无法验证空字段。
这是页面首次加载（空数组）和首次提交表单时我在控制台中得到的内容：
在任何字段内键入时，它似乎也使用每个“keydown”事件调用 showWarning() 方法。
知道可能是什么原因造成的吗？