如何在AngularJS中将参数传递给Promise

Question

I've go a small angular app with directive. For retriving data from serverside I use ngRoute. After retriving data I bind result to a scope property and parse the result with ng-repeat like so:

 <div class="col-xs-12" ng-repeat="clsRow in classificatorData">
   <span>{{clsRow.code}}</span>
 </div>

This function that retrievs data from resource

var getClassificatorDataScope = function (criteria, predicate) {
                references.initialize('classificators');
                references
                    .getRefereces(null, $scope.classificatorType, criteria, predicate == null ? "NONE" : predicate, $scope.limitLevel, null)
                    .$promise.then(function (result) {
                        $scope.classificatorData = result.Data;
                    });


            };

Everything works fine. But if I try to implement passing result data container (dataScope) like so

var getClassificatorDataScope = function (criteria, predicate, dataScope) {
                references.initialize('classificators');
                references
                    .getRefereces(null, $scope.classificatorType, criteria, predicate == null ? "NONE" : predicate, $scope.limitLevel, null)
                    .$promise.then(function (result) {
                        dataScope = result.Data;
                    });


            };

And use it in controller like so

getClassificatorDataScope("CODE", null, $scope.classificatorData);

I've got no data at all. Please help me to understand such behaviour.

Answer 1

There's 2 problems here.

dataScope = result.Data;

The first one is this. This doesn't act like how you'd expect it would. It doesn't replace the $scope.classificatorData . All it does is replace the local dataScope variable in getClassificatorDataScope to result.Data (yes, it's not "passed by reference").

Second, you're using promises incorrectly. You return the promise for listening, not pass the scope to who-knows-where. Your data layer should not be aware of $scope or the UI in general. Return the promise to the controller, and have it listen for the data from it.

// In your function
var getClassificatorDataScope = function(criteria, predicate) {
  references.initialize('classificators');
  return references
    .getRefereces(null, $scope.classificatorType, criteria, predicate == null ? "NONE" : predicate, $scope.limitLevel, null)
    .$promise
};

// In your controller
getClassificatorDataScope("CODE", null).then(function(result){
  $scope.classificatorData = result.Data;
});

Answer 2

The problem might be in your references.getRefereces method. It should return a promise and later resolve it with the proper result(I see you try to access "Data" attribute from result.). something like this:

reference.getReferences = function() {
       var deferred = $q.defer();  
       someAsyncOperations(function callback(){
          deferred.resolve({Data: result})  // make sure you have the "Data" attr
       })
       return deferred.promise;

// or if someAyncOperations already return a promise
// return someAsyncOperations.then(function(result) {
//    return {Data: result};
// });
    }

Answer 3

Seems that in second example you're trying to assign data retrieved from server to dataScope but since AJAX data loading is asynchronoys so $promise is resolved later than your template with ng-repeat is drawn.

There's not enough code provided in question to write whole example - how it should be implemented. But basically you should return $promise from your service and in controller change $scope variables upon

promise.then(function() {
//do stuff with $scope variables
})