angular resolve returns function instead of value

Question

I am trying to refactor some code out of my controller and into the route's 'resolve' and am having trouble getting the correct return value from resolve. I think the problem is either due to my misunderstanding of js closures or the $q library in angular.

In the routing:

.when('/countries/:id', {
      templateUrl: 'country/country.html',
      controller: 'countryCtrl',
      resolve: {
        ActiveCountry: ['CountryData', '$q', '$route', function(CountryData, $q, $route) {
          var defer = $q.defer();
          CountryData($route.current.params.id).then(function(data){
            console.log(data);
            defer.resolve(data);
          });
          return defer.promise;
        }]
      }
    })

The console.log in this block returns the correct JSON object from the api call. However, when it is passed into the controller, the controller returns the function from the CountryData service:

.controller('countryCtrl', [
  'CountryData',
  '$routeParams',
  '$scope',
  function (ActiveCountry, $routeParams, $scope) {
    var countryId = $routeParams.id;
    console.log(ActiveCountry);
    $scope.mapId = $routeParams.id.toLowerCase();
    $scope.country = ActiveCountry;
  }
]);

The value of the routing console.log is: Object {countryName: "Spain", currencyCode: "EUR", fipsCode: "SP", countryCode: "ES", isoNumeric: "724"…}

but the controller console log is the function from my CountryData service:

function (countryId) {
      var defer = $q.defer();
      $http.get(COUNTRIES_PATH + '&country=' + countryId + API_AUTH, { cache: true }).success(function (data) {
        defer.resolve(data.geonames[0]);
      });
      return defer.promise;
    }

Why is the object from the routing not being passed into the controller correctly?

Also, why do I need to use $q in the router when it is already built into the CountryData service? Without using $q in the routing, it returns the function rather than the function's return value.

why do I need to use $q in the router when it is already built into the CountryData service You don't have to. Just make CountryData return promise. — dfsq
– dfsq, Commented Jun 26, 2014 at 5:35

link · Accepted Answer · 2014-06-26 07:13:26Z

1

You put 'CountryData' and then ActiveCountry for your controller arguments. So they do not match up.

It should be 'CountryData' and CountryData

controller('countryCtrl', [
  'CountryData',
  '$routeParams',
  '$scope',
  function (CountryData, $routeParams, $scope) {
    var countryId = $routeParams.id;
    console.log(ActiveCountry);
    $scope.mapId = $routeParams.id.toLowerCase();
    $scope.country = ActiveCountry;
  }
]);

answered Jun 26, 2014 at 7:13

link

2,5101 gold badge18 silver badges18 bronze badges

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

1 Comment

user2936314 Over a year ago

nice catch! starred at this for a few hours

Andrew Eisenberg · Accepted Answer · 2014-06-26 05:47:37Z

1

Angular will automatically resolve any promises that are returned from functions on the resolve property. So, your resolve property should look like this:

resolve: {
  ActiveCountry: ['CountryData', '$q', '$route', function(CountryData, $q, $route) {
    return CountryData($route.current.params.id);
  }
}

Before invoking your controller method $routeProvider will resole all promises that are passed as parameters to the controller. For more information, see $routeProvider.when().

answered Jun 26, 2014 at 5:47

Andrew Eisenberg

28.9k9 gold badges100 silver badges156 bronze badges

1 Comment

user2936314 Over a year ago

looks like maybe the problem is in my service? If I set the resolve to console.log(CountryData($route.current.params.id); it does not log the return value, but the function itself: Object {then: function, catch: function, finally: function} However, in Chrome console network I can see that the service is making the api call as it should.

Collectives™ on Stack Overflow

angular resolve returns function instead of value

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related