How to pass arguments to promise in AngularJS

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.

Joseph · Accepted Answer · 2015-07-17 12:48:57Z

2

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

edited Jul 17, 2015 at 12:48

answered Jul 16, 2015 at 13:32

Joseph

120k31 gold badges186 silver badges238 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anton Over a year ago

Dear Joseph. Could you explain why - it's not "pass the reference"? I thought clouser would help in this case.

shershen · Accepted Answer · 2015-07-16 13:31:39Z

0

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

answered Jul 16, 2015 at 13:31

shershen

10k11 gold badges44 silver badges62 bronze badges

Comments

Alan · Accepted Answer · 2015-07-16 13:42:30Z

0

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

edited Jul 16, 2015 at 13:42

answered Jul 16, 2015 at 13:31

Alan

6546 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to pass arguments to promise in AngularJS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related