在 AngularJS 自定义验证指令中调用异步服务 [英] Call async service in AngularJS custom validation directive
问题描述
我有一个自定义验证指令(验证用户名不存在).验证使用 $http 服务询问服务器用户名是否存在,因此返回的是一个 promise 对象.这对于验证非常有效.当用户名已被使用时,表单无效并且包含 myform.$error.usernameVerify.但是, user.username 始终未定义,因此它破坏了我的 ng-model 指令.我认为这可能是因为 .success 中的函数正在创建它自己的范围,并且返回值未在控制器 $scope 上使用.我该如何解决这个问题,以便 ng-model 绑定仍然有效?
commonModule.directive("usernameVerify", ['userSvc',函数(userSvc){返回 {要求:'ngModel',范围:假,链接:函数(范围,元素,属性,ctrl){ctrl.$parsers.unshift(checkForAvailability);ctrl.$formatters.unshift(checkForAvailability);函数 checkForAvailability(value) {if (value.length <5) {返回值;}//userSvc.userExists 函数只是使用 $http 调用 rest apiuserSvc.userExists(值).成功(功能(已使用){var valid = alreadyUsed === 'false';如果(有效){ctrl.$setValidity('usernameVerify', true);返回值;}ctrl.$setValidity('usernameVerify', false);返回未定义;});}}}}]);
这是我的模板:
<div class="form-group" ng-class="{'has-error': accountForm.username.$dirty && accountForm.username.$invalid}"><label class=" col-md-3 control-label">用户名:</label><div class="col-md-9"><输入名称=用户名"类型=文本"类=形式控制"ng-model="user.username"ng-disabled="user.id"ng-minlength=5用户名验证需要/><span class="field-validation-error" ng-show="accountForm.username.$dirty && accountForm.username.$error.required">需要用户名.</span><span class="field-validation-error" ng-show="accountForm.username.$dirty && accountForm.username.$error.minlength">用户名必须至少为 5 个字符.</span><span class="field-validation-error" ng-show="accountForm.username.$dirty && accountForm.username.$error.usernameVerify">用户名已被占用.</span>
为了让它起作用,我需要添加返回值;"在异步调用之外.代码如下.
commonModule.directive("usernameVerify", ['userSvc',函数(userSvc){返回 {要求:'ngModel',范围:假,链接:函数(范围,元素,属性,ctrl){ctrl.$parsers.unshift(checkForAvailability);ctrl.$formatters.unshift(checkForAvailability);函数 checkForAvailability(value) {if (value.length <5) {返回值;}userSvc.userExists(值).成功(功能(已使用){var valid = alreadyUsed === 'false';如果(有效){ctrl.$setValidity('usernameVerify', true);返回值;}ctrl.$setValidity('usernameVerify', false);返回未定义;});//下面是添加的代码行.返回值;}}}}]);
I have a directive for custom validation (verify a username doesn't already exist). The validation uses the $http service to ask the server if the username exists, so the return is a promise object. This is working fantastic for validation. The form is invalid and contains the myform.$error.usernameVerify when the username is already taken. However, user.username is always undefined, so it's breaking my ng-model directive. I think this is probably because the function in .success is creating it's own scope and the return value isn't used on the controllers $scope. How do I fix this so the ng-model binding still works?
commonModule.directive("usernameVerify", [
'userSvc', function(userSvc) {
return {
require: 'ngModel',
scope: false,
link: function(scope, element, attrs, ctrl) {
ctrl.$parsers.unshift(checkForAvailability);
ctrl.$formatters.unshift(checkForAvailability);
function checkForAvailability(value) {
if (value.length < 5) {
return value;
}
// the userSvc.userExists function is just a call to a rest api using $http
userSvc.userExists(value)
.success(function(alreadyUsed) {
var valid = alreadyUsed === 'false';
if (valid) {
ctrl.$setValidity('usernameVerify', true);
return value;
}
ctrl.$setValidity('usernameVerify', false);
return undefined;
});
}
}
}
}
]);
Here is my template:
<div class="form-group" ng-class="{'has-error': accountForm.username.$dirty && accountForm.username.$invalid}">
<label class=" col-md-3 control-label">Username:</label>
<div class="col-md-9">
<input name="username"
type="text"
class="form-control"
ng-model="user.username"
ng-disabled="user.id"
ng-minlength=5
username-verify
required />
<span class="field-validation-error" ng-show="accountForm.username.$dirty && accountForm.username.$error.required">Username is required.</span>
<span class="field-validation-error" ng-show="accountForm.username.$dirty && accountForm.username.$error.minlength">Username must be at least 5 characters.</span>
<span class="field-validation-error" ng-show="accountForm.username.$dirty && accountForm.username.$error.usernameVerify">Username already taken.</span>
</div>
</div>
In order to get this to work, I needed to add "return value;" outside of the asynchronous call. Code below.
commonModule.directive("usernameVerify", [
'userSvc', function(userSvc) {
return {
require: 'ngModel',
scope: false,
link: function(scope, element, attrs, ctrl) {
ctrl.$parsers.unshift(checkForAvailability);
ctrl.$formatters.unshift(checkForAvailability);
function checkForAvailability(value) {
if (value.length < 5) {
return value;
}
userSvc.userExists(value)
.success(function(alreadyUsed) {
var valid = alreadyUsed === 'false';
if (valid) {
ctrl.$setValidity('usernameVerify', true);
return value;
}
ctrl.$setValidity('usernameVerify', false);
return undefined;
});
// Below is the added line of code.
return value;
}
}
}
}
]);
这篇关于在 AngularJS 自定义验证指令中调用异步服务的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!