[英]AngularJS directive not updating view as expected
我正在使用表单验证指令。 每次更改用户名字段都会发出 http 请求。 我可以在控制台中看到请求发生了,但是直到该字段发生模糊事件后,视图才会使用“唯一”错误消息进行更新。
但是,一旦用户名从重复的更改为唯一的,错误消息就会立即消失。 在这个方向上不需要模糊(隐藏错误消息),只在另一个方向上(显示错误消息)......
这是为什么?
======== 指令 ==========
myDirs.directive('ensureUnique', ['$http', function($http) {
return {
require: 'ngModel',
link: function(scope, ele, attrs, c) { if (scope.registered) {return true};
scope.$watch(attrs.ngModel, function() {
$http({
method: 'GET',
url: 'http://webservice.buddyplatform.com/v1/UserAccount_Profile_CheckUserName',
params: {
UserNameToVerify: ele.val(),
BuddyApplicationName:'xxx',
BuddyApplicationPassword:'yyy'
}
}).success(function(data, status, headers, cfg) {
c.$setValidity('unique', (data==='UserNameAvailble'));
}).error(function(data, status, headers, cfg) {
c.$setValidity('unique', false);
});
});
}
}
}]);
============ HTML ==============
<label>Username:</label>
<input name="username" type="text" ng-model="form.username"
ng-minlength=5 ng-maxlength=20 ensure-unique="username" required/>
<div class="error" ng-show="myForm.username.$dirty && myForm.username.$invalid">
<small class="error" ng-show="myForm.username.$error.required">Please input a username</small>
<small class="error" ng-show="myForm.username.$error.minlength">Your username is required to be at least 5 characters</small>
<small class="error" ng-show="myForm.username.$error.maxlength">Your username cannot be longer than 20 characters</small>
<small class="error" ng-show="myForm.username.$error.unique">That username is taken, please try another</small>
</div>
摘要周期很棘手,但据我所知,成功是在摘要周期内,之后没有新的摘要周期。 所以设置有效性并不意味着会有另一个摘要。 有几种方法可以解决这个问题。 最简单的方法是使用$timeout
服务。 为此,将$timeout
注入您的指令,然后像这样更改代码:
$timeout(function(){c.$setValidity('unique', (data==='UserNameAvailble'));});
您也可以使用 $apply 或手动触发 $digest 来执行此操作。 但是,如果您不同步,这两种方法都可能触发错误。 $timeout 没有那么快,因为它总是触发另一个摘要,即使不需要。 有很多与摘要、循环等相关的问题。这个问题特别相关: Angular JS: Chaining promises and the digest cycle
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.