如何重构Angular对回调的承诺
How to refactor Angular promise to Callback?
我有一个控制器初始化方法,它初始化模板中的自动完成输入:
$scope.initAutoCompleteForWorkers = function (id) {
// INIT AUTOCOMPLETE FOR WORKERS
var promise = GlobalHelperService.workersListForAutocomplete();
promise.then(
function(answer) {
// do something
console.log("Answer");
console.log(answer);
console.log("Name" + answer.name);
console.log("Surname" + answer.surname);
//$scope.projectDetail.newWorker = "";
//$scope.projectDetail.newWorkerName = "";
$scope.projectDetail.newWorker = answer;
$scope.projectDetail.newWorkerName = answer.name +" "+answer.surname ;
},
function(error) {
// report something
console.log("Error");
console.log("Processing error with status " +status);
growlNotifications.add($translate.instant('PROCESSING_REQUEST_ERROR') + jsonResponse.message , 'error', $rootScope.notificationLifetime);
},
function(progress) {
// report progress
console.log("Progres");
});
};
这是init方法,应该在每个select事件之后返回deffered.resolve。
this.workersListForAutocomplete = function (container, options) {
var deferred = $q.defer();
$("#autocompleteWorker").kendoAutoComplete({
dataSource : {
type: "json",
serverFiltering: true,
transport: {
read: function (options) {
console.log("List");
console.log(options.data);
requestParams = {
"entityName": "worker",
"page": 1,
"pageSize": 20,
"filter": options.data.filter,
"sort": [
{
"field": "name",
"ord": "asc"
}
]
};
ApiService.doHttpRequest(
"POST",
$rootScope.apiBaseUrl + "worker/search",
requestParams
)
.success(function (data, status, headers, config) {
// successful data retrieval
console.log("request success, checking state");
console.log(data);
// sent status to global HTTP status service
var jsonResponse = ApiService.processReturnedHttpState(status);
console.log("Status response is " + jsonResponse.result);
// do something with data
switch (jsonResponse.result) {
case true:
options.success(data.results);
break;
case false:
growlNotifications.add($translate.instant('LIST_LOADING_ERROR'), 'error', $rootScope.notificationLifetime);
break;
}
})
.error(function (data, status, headers, config) {
deferred.reject(e);
// hide loading spinner
kendo.ui.progress(gridView, false);
});
}
}
},
//dataTextField: "name",
dataValueField: "id",
template: '#: data.name # #: data.surname #',
filter: "contains",
minLength: 1,
select : function (e) {
console.log("select");
var dataItem = this.dataItem(e.item.index());
console.log(dataItem);
deferred.resolve(dataItem);
}
});
return deferred.promise;
};
问题是function(answer) {
仅在第一次选择事件时被调用。第二次和更多的是不应答promise事件调用(并且输入由[Object,Object]值填充)。
我发现更好的解决方案应该是使用回调或事件,但我不知道如何以正确的方式进行。
有人能告诉我,怎么做对吗?
谢谢你的帮助。
您可以通过以下方式使用回调:
this.workersListForAutocomplete = function (container, options,callback) {
$("#autocompleteWorker").kendoAutoComplete({
dataSource : {
type: "json",
serverFiltering: true,
transport: {
read: function (options) {
console.log("List");
console.log(options.data);
requestParams = {
"entityName": "worker",
"page": 1,
"pageSize": 20,
"filter": options.data.filter,
"sort": [
{
"field": "name",
"ord": "asc"
}
]
};
ApiService.doHttpRequest(
"POST",
$rootScope.apiBaseUrl + "worker/search",
requestParams
)
.success(function (data, status, headers, config) {
// successful data retrieval
console.log("request success, checking state");
console.log(data);
// sent status to global HTTP status service
var jsonResponse = ApiService.processReturnedHttpState(status);
console.log("Status response is " + jsonResponse.result);
// do something with data
switch (jsonResponse.result) {
case true:
options.success(data.results);
break;
case false:
growlNotifications.add($translate.instant('LIST_LOADING_ERROR'), 'error', $rootScope.notificationLifetime);
break;
}
})
.error(function (data, status, headers, config) {
callback(e,null);
// hide loading spinner
kendo.ui.progress(gridView, false);
});
}
}
},
//dataTextField: "name",
dataValueField: "id",
template: '#: data.name # #: data.surname #',
filter: "contains",
minLength: 1,
select : function (e) {
console.log("select");
var dataItem = this.dataItem(e.item.index());
console.log(dataItem);
callback(null,dataItem);
}
});
return deferred.promise;
};
并且在您的控制器中:
$scope.initAutoCompleteForWorkers = function (id) {
// INIT AUTOCOMPLETE FOR WORKERS
GlobalHelperService.workersListForAutocomplete(function(err,answer){
if(err){
// report something
console.log("Error");
console.log("Processing error with status " +status);
growlNotifications.add($translate.instant('PROCESSING_REQUEST_ERROR') + jsonResponse.message , 'error', $rootScope.notificationLifetime);
} else {
// do something
console.log("Answer");
console.log(answer);
console.log("Name" + answer.name);
console.log("Surname" + answer.surname);
//$scope.projectDetail.newWorker = "";
//$scope.projectDetail.newWorkerName = "";
$scope.projectDetail.newWorker = answer;
$scope.projectDetail.newWorkerName = answer.name +" "+answer.surname ;
}
});
};
相关文章:
- 承诺在非节点式回调上使用Bluebird
- 角承诺的“then”函数的成功回调的词汇范围是什么?
- JQuery 承诺已经包含回调的函数
- JavaScript - 返回承诺和/或调用回调
- 承诺中的成功回调不会发生$http
- 如何重构“;回调金字塔”;转换为基于承诺的版本
- 承诺在Protractor中进行回调排序
- Javascript承诺动态回调
- 编写一个使用传递两个参数的回调的承诺
- Phantom.js-如何使用承诺而不是回调
- 在第一次错误回调时退出承诺链
- 如何获取 Ember 组件对象内部承诺成功或错误回调
- 创建承诺回调
- 回调/承诺无法正常工作
- 通知承诺角度删除回调
- 回调/承诺在快递.js中实现
- Node sequelize回调承诺期望一个函数,是否有一种方法可以通过函数调用删除已声明的函数
- Angular-For Loop HTTP回调/承诺
- 特定于Node-webkit的javascript回调/承诺问题
- 让javascript函数与回调/承诺实现总是返回一个承诺