Angularjs是指令中实际执行的最后一个异步调用
Angularjs only last async call in directive actually executed
注意:我使用的是AngularJS 1.2
我有一个表单,其中每个字段都将在值更改时到达服务器进行验证。
下面的html片段(假设所有目的都正确设置了html(:
<div class="col-sm-5">
<input class="form-control input-sm" url="type:googleplus" ng-model="element.googleplus" type="text"><br />
<input class="form-control input-sm" url="type:yelp" ng-model="element.yelp" type="text"><br />
<input class="form-control input-sm" url="type:foursquare" ng-model="element.foursquare" type="text>
</div>
在我的javascript中,我设置了一个指令,该指令挂接到每个字段,并试图在值更新时访问服务器。破坏当前功能的场景是当表单加载了填充的值时。
OnValueChanged多次调用Validate.Options,其间没有停顿。我预计每次Validation.Options调用都会命中服务器,但只执行最后一个调用。
AngularJS如下:
...
.factory('Validation', ['va', function (va) { // 'va' is a throttled resource
var result = va('/manage/api/validate?type=:type&input=:url',
{
type: '@type',
url: '@url'
},
{
options: {
method: 'options',
debounceMS: 0, // turned off debounce in lieu of this problem
abortPending: false
}
});
return result;
}])
...
.directive('url', ['$filter', 'Validation', '$q', function ($filter, Validation, $q) {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
// parses some stuff
var config = {};
(attrs['url'] || '').split(' ').map(function (p) { var a = p.split(':'); config[a[0]] = a[1]; });
if (config.type)
config.type = config.type.split(',');
config.isRequired = elm[0].required;
function validateUrl(viewValue, type) {
var deferred = $q.defer();
Validation.options({ url: viewValue, type: type }, function (response) {
deferred.resolve(response.IsValid);
});
return deferred.promise;
}
function onValueChanged(viewValue) {
// hits the server to check if the url is valid
if (viewValue) {
var type = config.type ? config.type[0] : undefined;
validateUrl(viewValue, type).then(function (isValid) {
ctrl.$setValidity('url', isValid);
});
}
else {
// prevents saving the listing as field is invalid
ctrl.$setValidity('url', !config.isRequired);
}
return viewValue;
}
ctrl.$parsers.push(onValueChanged);
// revalidate when the model updates
scope.$watch(
function () { return ctrl.$viewValue; },
function (viewValue) { return onValueChanged(viewValue); }
);
}
};
}])
为什么只执行最后一个调用?打开网络选项卡,我看到了一个类型为"foursquare"的服务器调用。
想明白了!与被抑制的资源有关。。。显然,将去抖动MS设置为0不足以阻止它执行去抖动部分。我切换回$resource,一切都正常(但这也意味着onValueChanged的去粘部分不起作用(。
相关文章:
- 表追加而不附加最后一个元素
- 无法在Ionic select中预先选择最后一个选项
- 为什么画布形状只在3个画布中的最后一个画布上渲染
- Jquery append oly获取循环Rails中的最后一个elemen
- 如何创建更好的方式来维护基于我的代码访问的最后一个页面
- dataTables-如何自定义分页类型以显示最后一个页码后面的省略号,
- 多维关联数组的最后一个索引
- 无法获取vis.js最后一个或第一个选定的网络节点
- 循环以检查数组中的最后一个图像
- 从输入值中删除最后一个单词
- 尝试使用Javascript正则表达式来获取“&"分隔文本,无论它是否's是最后一个值
- 将其中一个异步方法重写为使用promise的方法
- 为什么这个正则表达式不't匹配最后一个字母数字字符
- 如何从多个复选框中获取最后一个值
- 将OnClick函数设置为<ul>,最后一个ul是擦除第一个ul-s
- 使用querySelector()获取最后一个td元素
- 收集异步调用并提交最后一个
- 循环中异步函数的最后一个值
- 我如何知道最后一个异步函数何时在ob" for键中返回结果?循环
- Angularjs是指令中实际执行的最后一个异步调用