为什么这个工厂返回一个 $$state 对象而不是 response.data？

Question

所以我在服务器中有一个对象集合，我想在页面加载时填充一个 ng-repeat。

我做了一个工厂，它从服务器上的资源中获取列表，如下所示：

  app.factory('objectArray', ['$http', function($http) {
      // This is returning a $$state object
      // instead of response.data...
      return $http.post('/get_collection').then(function(response) {
          console.log(response.data);
          return response.data;
      });
  }]);

在状态声明中使用 ui-router 和 resolve 属性之前，我已经使用过这段代码。但是，当将这个工厂直接注入我的控制器时，我得到的不是 response.data，而是 $$state 对象。

我的控制器是这样的：

 app.controller('applicationController', ['$scope', 'objectArray', function($scope, objectArray) {
     $scope.array = objectArray;
     console.log($scope.array);
 }]);

Answer 1

$http 服务 returns（以及 objectArray 服务）称为承诺。您可以通过注册回调函数来访问实际数据，回调函数将在数据可用时调用，即当对 http 请求的响应从服务器返回时：

objectArray.then(function(data) {
    $scope.array = data;
});

您在使用 resolve 时直接访问数据的原因是路由器在 resolve 函数 returns 承诺时等待承诺被解决。只有这样，它才会从 promise 中提取数据并将数据注入控制器。

为了更好地理解 promise，您可以阅读 the following article (and its sequel)。

Answer 2

正如@JB Nizet 所注意到的，您的代码很好，只需在控制器中解析它这是工作演示

angular.module('app', []);
angular.module('app').factory('objectArray', ['$http', function($http) {
  // This is returning a $$state object
  // instead of response.data...
  ////// changed request type and url for the sake of example
  return $http.get('http://jsonplaceholder.typicode.com/posts/1')
.then(function(response) {
  console.log(response.data);
  return response.data;
});
}]);
angular.module('app').controller('applicationController', ['$scope', 'objectArray', function($scope, objectArray) { 
  //////resolve it here
  objectArray.then(function(successResponse){
    $scope.array = successResponse;
    console.log($scope.array);
  });
}]);
angular.bootstrap(document.body, ['app']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="applicationController">
  <h5>Hello {{array.title}}</h5>
</div>

Answer 3

错误

@ angular.js:14800 [AngularJS - Leaflet] The marker definition is not valid.
17:49:07.437 angular.js:14800 [AngularJS - Leaflet]  Received invalid data on the marker $promise.
17:49:07.438 angular.js:14800 [AngularJS - Leaflet] The marker definition is not valid.
17:49:07.439 angular.js:14800 [AngularJS - Leaflet]  Received invalid data on the marker $resolved.

$$state 是问题所在。

markersFactory.query().$promise.then(function(data) {
    // open_street_maps to replace google maps
    angular.extend($scope, {
        center: {
            lat:   40.7231572,
            lng:  -73.988501,
            zoom: 13,
        } ,
        markers: data,
        tiles: tilesDict.opencyclemap,
    });
});

解决方案：angular.copy

markersFactory.query().$promise.then(function(data) {
    $scope.markers        = data;
    // open_street_maps to replace google maps
    angular.extend($scope, {
        center: {
            lat:   40.7231572,
            lng:  -73.988501,
            zoom: 13,
        } ,
        markers: angular.copy($scope.markers),
        tiles: tilesDict.opencyclemap,
        });
});

点赞！=)

为什么这个工厂返回一个 $$state 对象而不是 response.data？

Why is this factory returning a $$state object instead of response.data?

state

factory

angularjs