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，我得到一个$$状态对象。

我的控制器看起来像这样：

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

Answer 1

$ http服务返回的内容（因此objectArray服务是）被称为promise。您可以通过注册回调函数来访问实际数据，该函数在数据可用时称为，即当对http请求的响应从服务器返回时：

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

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

为了更好地了解承诺，您可以阅读the following article（及其sequel）。

Answer 2

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

＆＃13;

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']);

＆＃13;

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

＆＃13;

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

竖起大拇指！.. =）

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

3 个答案: