web-dev-qa-db-ja.com

このファクトリがresponse.dataではなく$$ stateオブジェクトを返すのはなぜですか？

そのため、サーバーにオブジェクトのコレクションがあり、ページの読み込み時に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);
 }]);
angularjsstatefactory
9
Alex Turner

$ httpサービスが返すもの（したがって、objectArrayサービスは）はpromiseと呼ばれます。実際のデータにアクセスするには、呼び出されるコールバック関数を登録しますデータが利用可能な場合、つまりhttpリクエストへの応答がサーバーから返される場合：

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

Resolveを使用するときにデータに直接アクセスできる理由は、resolve関数がpromiseを返すと、ルーターがpromiseが解決されるのを待つためです。そしてその時だけ、promiseからデータを抽出し、そのデータをコントローラーに注入します。

約束をよりよく理解するために、 次の記事 （およびその 続編 ）を読むことができます。

10
JB Nizet

@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>
3
Medet Tleukabiluly

エラー

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

親指を立てる！.. =）

0
Brian Sanchez