Angular: Accessing a promise from a controller within a service

Question

I'm using an API in my app that has a few steps:

Load full data from API 1
Get some of that data and use that to make params for the next API call
One that API call has been made, make a nvd3 chart (via a directive)

Controller:

$scope.deferred = $q.defer()

function makeChart(start, finish) {    
  api.getDetail(start, fin).then(function(throughput) {
    $scope.chartData = throughput;
    $scope.deferred.resolve();
  }, function(err) {
     console.log(err);
  })
}

api.getDetail(id).then(function(job){
  makeChart(job.start, job.finish);
})

// Directive

.directive('niceChart', [function(){
    return {
        restrict: 'E',
        replace: true,
        template: '<div>Nice Template!</div>',
        link: function (scope, element, attrs) {
        scope.deferred.then(function(){

         // Do stuff 

        })
      }
    }

 }])

When I do this I get scope.deferred.then is not a function.

What am I doing wrong here?

Dmitri Pavlutin · Accepted Answer · 2016-02-23 06:56:31Z

1

Use this code:

scope.deferred.promise.then(function(){
  // Do stuff 
})

The deferred object itself is not a promise, so it doesn't have the necessary methods. You should access the promise object: scope.deferred.promise.

But I recommend you to refactor the code to the following, sending the promise object as parameter:

var deferred = $q.defer()
$scope.promise = deferred.promise;

function makeChart(start, finish) {    
  api.getDetail(start, fin).then(function(throughput) {
    $scope.chartData = throughput;
    deferred.resolve();
  }, function(err) {
     console.log(err);
  })
}

api.getDetail(id).then(function(job){
  makeChart(job.start, job.finish);
})

////////////////////////////

.directive('niceChart', [function(){
    return {
        restrict: 'E',
        replace: true,
        template: '<div>Nice Template!</div>',
        link: function (scope, element, attrs) {
        scope.promise.then(function(){

         // Do stuff 

        })
      }
    }

 }])

answered Feb 23, 2016 at 6:56

Dmitri Pavlutin

19.2k8 gold badges41 silver badges46 bronze badges

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

4 Comments

JVG Over a year ago

Oh? I'm a little confused. Looking at the first example here: docs.angularjs.org/api/ng/service/$q, does this mean that running $q.defer() adds a .then() property to whatever function it's inside?

Dmitri Pavlutin Over a year ago

$q.defer() returns a deferred object which has .resolve(), .reject() and .promise. The deferred.promise has .then(), .catch() and finally()

JVG Over a year ago

Ahhh ok, I didn't see the return deferred.promise in the link above and it messed me up. Thanks mate!

Dmitri Pavlutin Over a year ago

@Jascination Glad to help.

Collectives™ on Stack Overflow

Angular: Accessing a promise from a controller within a service

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related