web-dev-qa-db-fra.com

Pourquoi cette usine renvoie-t-elle un objet d'état $$ au lieu de response.data?

J'ai donc une collection d'objets sur le serveur que je veux remplir avec une répétition-ng lors du chargement de la page.

J'avais une fabrique qui récupérait la liste d'une ressource sur le serveur, comme ceci:

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

Ce code a déjà fonctionné auparavant lors de l'utilisation de ui-router et de la propriété de résolution dans la déclaration d'état. Cependant, lorsque j'injecte cette usine directement dans mon contrôleur, au lieu d'obtenir response.data, je reçois un objet d'état $$.

Mon contrôleur ressemble à ceci:

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

Ce que le service $ http renvoie (et donc le service objectArray) est appelé une promesse. Vous pouvez accéder aux données réelles en enregistrant une fonction de rappel qui sera appelée lorsque les données sont disponibles , c'est-à-dire lorsque la réponse à la demande http revient du serveur:

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

Si vous avez directement accès aux données lors de l’utilisation de resolver, c’est que le routeur attend que la promesse soit résolue lorsque la fonction de résolution renvoie une promesse. Et alors seulement, il extrait les données de la promesse et les injecte dans le contrôleur.

Pour mieux comprendre les promesses, vous pouvez lire l'article suivant (et sa suite ).

11
JB Nizet

Comme @JB Nizet l'a remarqué, votre code est correct, résolvez-le simplement dans le contrôleur Voici une démonstration en cours

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