如何重构Angular对回调的承诺？

Question

I have controller init method which initialize autocomplete input in template:

$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");
            });
    };

This is init method which should returned deffered.resolve after the each select event.

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;
     };

Problem is that function(answer) { is called only for the first time select event. On the second time and more is not answer promise event called (and input is filled by [Object, Object] value).

I found that better solution should be to use a callback or event instead, but i don't know how to do it in right way.

Could somebody tells me, how to do it right?

Thanks for any help.

Answer 1

You can use callback in the following way:

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;
 };

and in your controller:

$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 ;
        }
    });
};