[英]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");
});
};
這是一個初始化方法,在每個選擇事件之后應返回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) {
。 在第二次以上,沒有響應的諾言事件被調用(並且輸入由[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 ;
}
});
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.