Comment faire attendre le contrôleur pour la promesse de résoudre du service angulaire

J'ai un service qui est de faire une requête AJAX vers le serveur cible

Service:

    function GetCompaniesService(options)
    {
        this.url = '/company';
        this.Companies = undefined;
        this.CompaniesPromise = $http.get(this.url);

    }

Contrôleur:

var CompaniesOb = new GetCompanies();
CompaniesOb.CompaniesPromise.then(function(data){
   $scope.Companies = data;
});

Je veux que mon service pour gérer l' ".ensuite, la fonction" plutôt que d'avoir à gérer dans mon contrôleur, et je veux être en mesure d'avoir mon contrôleur de la loi sur les données à PARTIR du service, après la promesse de l'intérieur, le service a été résolu.

Fondamentalement, je veux être en mesure d'accéder aux données comme suit:

var CompaniesOb = new GetCompanies();
$scope.Companies = CompaniesOb.Companies;

Avec la résolution de la promesse d'être traitées à l'intérieur du service lui-même.

Est-ce possible? Ou est la seule façon que je peux accéder à cette promesse de la résolution est de l'extérieur du service?

source d'informationauteur Axschech

  1. 4

    Si tout ce que vous voulez est de gérer la réponse de $http dans le service lui-même, vous pouvez ajouter un then fonction au service où vous n'avez plus de traitement puis return à partir de ce then fonction, comme ceci:

    function GetCompaniesService(options) {
  this.url = '/company';
  this.Companies = undefined;
  this.CompaniesPromise = $http.get(this.url).then(function(response) {
    /* handle response then */
    return response
  })
}

    Mais vous aurez encore utiliser une promesse dans le contrôleur, mais ce que vous obtenez de retour ont déjà été traités dans le service.

    var CompaniesOb = new GetCompanies();
CompaniesOb.CompaniesPromise.then(function(dataAlreadyHandledInService) {
  $scope.Companies = dataAlreadyHandledInService;
});
  2. 3

    Il n'y a pas de problème pour atteindre cet!

    La principale chose que vous devez garder à l'esprit est que vous devez garder la même référence de l'objet (et en javascript, les tableaux sont des objets) dans votre service.

    voici notre HTML simple:

    <div ng-controller = "companiesCtrl"> 
  <ul ng-repeat="company in companies">
     <li>{{company}}</li>
  </ul>
</div>

    Ici est à notre service de mise en œuvre:

    serviceDataCaching.service('companiesSrv', ['$timeout', function($timeout){
  var self = this;

  var httpResult = [
    'company 1',
    'company 2',
    'company 3'
  ];

  this.companies = ['preloaded company'];
  this.getCompanies = function() {
    //we simulate an async operation
    return $timeout(function(){
      //keep the array object reference!!
      self.companies.splice(0, self.companies.length);

      //if you use the following code:
      //self.companies = [];
      //the controller will loose the reference to the array object as we are creating an new one
      //as a result it will no longer get the changes made here!
      for(var i=0; i< httpResult.length; i++){
        self.companies.push(httpResult[i]);
      }
      return self.companies;
    }, 3000);                    
}}]);

    Et enfin le contrôleur comme vous le souhaitiez:

    serviceDataCaching.controller('companiesCtrl', function ($scope, companiesSrv) {
  $scope.companies = companiesSrv.companies;
  companiesSrv.getCompanies();
});

    Explications

    Comme dit ci-dessus, l'astuce est de garder la référence entre le service et le contrôleur. Une fois que vous respecter cela, vous pouvez tout à fait de lier votre contrôleur portée sur une propriété publique de votre service.

    Ici un violon c'est fini.

    Dans les commentaires du code, vous pouvez essayer de dé-commenter la pièce qui ne fonctionne pas et vous verrez comment le contrôleur est perdre de la référence. En fait, le contrôleur va continuer de se faire une référence à l'ancien tableau, tandis que le service va changer la nouvelle.

    Une dernière chose importante: il faut garder à l'esprit que le $timeout est le déclenchement d'une $apply() sur le rootSCope. C'est pourquoi notre contrôleur de champ est "rafraîchissant " seul". Sans cela, et si vous essayez de le remplacer avec un setTimeout (), vous verrez que le contrôleur n'est pas la mise à jour de la liste de compagnie.
    Pour contourner cela, vous pouvez:

    • ne rien faire si vos données sont récupérées avec $http, car elle demande un $s'appliquent sur le succès
    • enveloppez-vous entraîner dans un $timeout(..., 0);
    • injecter $rootSCope dans le service et l'appel de $apply() lorsque l'opération asynchrone est fait
    • dans le contrôleur ajouter un $scope.$appliquer() sur le getCompanies() promesse de succès

    Espérons que cette aide!

  3. -1

    Vous pouvez passer le $scope dans GetCompanies et définir $champ d'application.Les entreprises de données dans le service

     function GetCompaniesService(options,scope)
 {
    this.url = '/company';
    this.Companies = undefined;
    this.CompaniesPromise = $http.get(this.url).then(function(res) {
      scope.Companies = res;
    });

 }

    Vous devez faire attention à l'ordre dans lequel vous utiliser les données. C'est la raison derrière une promesse pour commencer.