我按照解决方案检查数据库中是否已存在用户名：本主题中定义angularjs: custom directive to check if a username exists
我在实践中将其用于检查数据库中是否已存在电子邮件。在我的应用程序中，用户可以注册5个电子邮件。 当用户在字段中输入电子邮件时，将正确执行查询以检查电子邮件是否已在数据库中使用。
当电子邮件格式不正确时，已实施了一些错误消息。 当电子邮件已被使用时（因此存在于数据库中），应该同等地显示一条消息，但是我有一些问题（使用电子邮件地址的5个字段）
此处 我的控制器 ：
// MY DIRECTIVE FOR CHECKING IF EMAIL IS ALREADY USED
app.directive('emailAvailable', function($timeout, $q, $http, ContactService) {
return {
restrict: 'AE',
require: 'ngModel',
link: function(scope, elm, attr, model) {
model.$asyncValidators.emailExists = function() {
email= elm.val();
return ContactService.searchContactByEmail(email).success(function(contact){
$timeout(function(){
if(contact.length >0){
model.$setValidity('emailExists', contact);
//model.$setValidity('unique', false); // For validation criteria in the form
scope.emailAlreadyExist='true';
scope.contacts = contact;
// THE VALUE IS CORRECTLY DISPLAYED IN THE CONSOLE
console.log("exist : " + scope.emailAlreadyExist);
}else{
model.$setValidity('emailExists', contact);
//model.$setValidity('unique', true); // For validation criteria in the form
scope.emailAlreadyExist='false';
scope.contacts = null;
// THE VALUE IS CORRECTLY DISPLAYED IN THE CONSOLE
console.log("exist : " + scope.emailAlreadyExist);
}
}, 600);
});
};
}
}
});
app.controller('ctrlAddContacts', function ($scope, ContactService){
$scope.title="Add a contact";
$scope.edit_oldContact = "false";
// ALLOW TO HAVE SEVERAL EMAILS
$scope.emails = [
{
}];
$scope.log = function() {
console.log($scope.emails);
};
$scope.add = function() {
var dataObj = {email:''};
$scope.emails.push(dataObj);
}
.........
});
此处 我的工厂 ：
app.factory('ContactService', function($http){
var factory={};
// CALL COLDFUSION FUNCTION
factory.searchContactByEmail=function(string){
if (string){
chaine='http://myapp/contacts.cfc?method=searchContactByEmail&contactEmail=' + string;
}else{
chaine='';
}
return $http.get(chaine);
};
return factory;
})
此处 我的模板 ：
<! --------------------------- MANAGE MAILS --------------------------->
<div ng-repeat="(key, email) in emails | limitTo : 5">
<div class="form-group">
<span ng-switch="$index">
<label ng-switch-when="0" for="txtEmail" class="col-sm-2 control-label">Main email</label>
<label ng-switch-default for="txtEmail" class="col-sm-2 control-label">Email {{$index+1}}</label>
</span>
<div class="col-sm-9" ng-switch="$index">
<input ng-switch-when="0" type="email" class="form-control"
name="txtEmail_{{$index}}" maxlength="100" placeholder="Enter main email"
required
ng-model="contact.EMAIL"
email-available
>
<input ng-switch-default type="email" class="form-control"
name="txtEmail_{{$index}}" maxlength="100" placeholder="Enter Email {{$index+1}}"
required
ng-model="contact['EMAIL_'+$index]"
email-available
>
<!-- THE VALUE emailAlreadyExist IS NOT DISPLAYED IN THE PAGE -->
<p>txtEmail_{{$index}} : {{emailAlreadyExist}}</p>
<! ----------------- Display the message when the email is already used ----------------->
<div ng-show="ContactForm['txtEmail_' + $index].$dirty && emailAlreadyExist=='true' " class="alert alert-info" role="alert" style="margin-top:10px;">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Email is already used
</div>
<div ng-if="ContactForm['txtEmail_' + $index].$pending.emailExists">checking....</div>
<! ----------------- Display the message when the email is already used ----------------->
<div class="error-container"
ng-show="ContactForm['txtEmail_' + $index].$dirty && ContactForm['txtEmail_' + $index].$invalid">
<div ng-show="ContactForm['txtEmail_' + $index].$error.email" class="alert alert-info" role="alert" style="margin-top:10px;">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
That is not a valid email. Please input a valid email.
</div>
<div ng-show="ContactForm['txtEmail_' + $index].$error.required" class="alert alert-info" role="alert" style="margin-top:10px;">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Your email is required.
</div>
<div ng-show="ContactForm['txtEmail_' + $index].$error.minlength" class="alert alert-info" role="alert" style="margin-top:10px;">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Your email is required to be at least 3 characters
</div>
<div ng-show="ContactForm['txtEmail_' + $index].$error.maxlength" class="alert alert-info" role="alert" style="margin-top:10px;">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Your email cannot be longer than 20 characters
</div>
</div>
</div>
<div class="col-sm-1" ng-show="$index == 0">
<a href="" ng-click="add()" ng-show="emails.length<5" class="inline btn btn-primary icon_email">
<span class="glyphicon glyphicon-plus icon2"></span><span class="addButton">Add</span>
</a>
</div>
</div>
</div>
<! --------------------------- MANAGE MAILS --------------------------->
您能否告诉我如何更新（我猜想的指令）脚本以显示消息 已使用电子邮件 ？
提前感谢您的帮助。
答案 0 :(得分：0)
请尝试以下指令：
// MY DIRECTIVE FOR CHECKING IF EMAIL IS ALREADY USED
app.directive('emailAvailable', function($timeout, $q, $http, ContactService) {
return {
restrict: 'AE',
require: 'ngModel',
link: function(scope, elm, attr, model) {
model.$asyncValidators.emailExists = function() {
email= elm.val();
return ContactService.searchContactByEmail(email).success(function(contact){
$timeout(function(){
if(contact.length >0){
model.$setValidity('emailExists', true);
//model.$setValidity('unique', false); // For validation criteria in the form
scope.emailAlreadyExist='true';
scope.contacts = contact;
// THE VALUE IS CORRECTLY DISPLAYED IN THE CONSOLE
console.log("exist : " + scope.emailAlreadyExist);
}else{
model.$setValidity('emailExists', false);
//model.$setValidity('unique', true); // For validation criteria in the form
scope.emailAlreadyExist='false';
scope.contacts = null;
// THE VALUE IS CORRECTLY DISPLAYED IN THE CONSOLE
console.log("exist : " + scope.emailAlreadyExist);
}
}, 600);
});
};
}
}
});
并在模板中进行以下更改：
<! ----------------- Display the message when the email is already used ----------------->
<div ng-show="ContactForm['txtEmail_' + $index].$dirty && YOUR_FORM_NAME.$error.emailExists" class="alert alert-info" role="alert" style="margin-top:10px;">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Email is already used
</div>
<div ng-if="ContactForm['txtEmail_' + $index].$pending.emailExists">checking....</div>
<! ----------------- Display the message when the email is already used ----------------->