$http 后 Angular Factory 数据为空

Question

我正在尝试通过 http 请求方法将数据存储到 location[] 数组到 json 文件中。

问题是我的列表控制器总是包含一个空数组。

我的工厂

app.factory('listing__data', function($http, $q){
  return {
    locations: '',
    makeRequest: function(url) {
      // Create the deffered object
      var deferred = $q.defer();

      $http.get('/'+url).then(function(resp) {
        deferred.resolve(resp.data);
      });
      return deferred.promise;
    },
    getUrl: function(params) {
      var url = "locations.json";

      if(!this.locations) {
        this.locations = this.makeRequest(url);
      }
      // Return the myObject stored on the service
      return this.locations;
    }
  };
});

我的控制器

var listings__controller = app.controller('listings__controller', function($scope, distance__service, listing__data) {
    $scope.locations = [];

    listing__data.getUrl(distance__service.meters).then(function(data) {
    $.each(data.listings, function(i, item) {
          $scope.locations.push(item.location);
          console.log(item.location); // ** Shows Correct Object **
        });
    });
    console.log("How many inside:"+$scope.locations.length); // ** Empty - Shows 0 **
});

我似乎无法弄清楚为什么我的$scope.locations = [] 仍然是空的

Answer 1

即使没有 JB Nizet 提到的拼写错误，您仍然会看到 0，因为 console.log("How many inside:"+$scope.locations.length); 在您传递给 listing__data.getUrl(distance__service.meters).then 的回调之前执行，因为后者是异步的。

请记住，当使用异步函数时，执行流程不会遵循源代码的行顺序。

promise.then(function () {
    console.log('inside callback');
});
console.log('outside callback');

将打印outside callback 然后 inside callback。

因此，如果您要使用存储在 $scope.locations 中的值，则必须在回调中进行。