En attente de la promesse à régler avant le chargement de la ressource

Un de mes AngularJS contrôleurs contient cette ligne:

api.tickets.query()

la api module contient ceci:

angular.module('myapp.api', [
  'ngResource'
])

.factory('api', function($resource, applicationsService) {

  function fetchAppId() {
    return applicationsService.getCurrentApp();
  }

  return {
    tickets: $resource('tickets', {
      applicationId: fetchAppId
    }),
    ...
  }

applicationsService.getCurrentApp() rend un $http appel lui-même. Ainsi, vous pouvez peut-être voir le problème - cet appel peut pas résolu par le temps fetchAppId() retourne.

Comment puis-je contourner ce problème?

InformationsquelleAutor Bilal and Olga | 2013-10-25
  1. 7

    Permet de dire des données qui renvoie de applicationsService par async façon est:

     var data = [
    {
        "PreAlertInventory": "5.000000",
        "SharesInInventory": "3.000000",
        "TotalSharesSold": "2.000000"
    }

    et applicationsService usine retourne promesse:

    .factory('applicationsService', ['$resource','$q',  function($resource, $q) {
    var data = [
    {
        "PreAlertInventory": "5.000000",
        "SharesInInventory": "3.000000",
        "TotalSharesSold": "2.000000"
    }
    ];   

       var factory = {
            getCurrentApp: function () {
                var deferred = $q.defer();   

              deferred.resolve(data);

                return deferred.promise;
            }
        }
        return factory;
}]);

    Je voudrais simplement appeler api.tickets()

    $scope.data = api.tickets();

    mais notre api service ressemblera:

    .factory('api', function($resource, applicationsService,$q, $timeout) {

  function fetchAppId() {      
      return applicationsService.getCurrentApp();
  }

  return {
 tickets: function() {
         var deferred=$q.defer();
        fetchAppId().then(function(data) { //promise callback
            $timeout(function(){         //added dummy timeout to simulate delay
                    deferred.resolve(data);    
                }, 3000);                    
        });
        return deferred.promise;
     }
   }
});

    Démo Violon

    • Bingo, merci Maxime, qui a travaillé comme un charme. Apprécier le Violon et le détail 🙂
    • Je pense que cela fonctionne parce que la promesse de $étendues sont attendu pour le $apply() cycle à la fin. Que dit la documentation "q$est intégré avec le $rootScope.Champ d'application Champ d'application du modèle d'observation mécanisme angulaire, ce qui signifie une propagation plus rapide de la résolution ou de rejet dans vos modèles, et en évitant les navigateur repeint, ce qui aurait pour résultat de scintillement de l'INTERFACE utilisateur."
    • si quelqu'un à l'aide de $ressource pour la demande, alors nous avons besoin d'inclure $promesse fetchAppId().$promesse.ensuite(function(data) { ---- });
    InformationsquelleAutor Maxim Shoustin
  2. 4

    Vous devez faire est de créer une promesse de votre auto.

    .factory('api', function($resource, applicationsService,$q) {

  function fetchAppId() {
    return applicationsService.getCurrentApp();
  }

  return {
    tickets: function() {
        var defer=$q.defer();
        fetchAppId().then(function(data) {
             var appId=data;
             $resource('tickets', {applicationId: appId})
                 .then(function(data) {
                      defer.resolve(data);
                 })
        }
        return defer.promise;
     }
   }
    InformationsquelleAutor Chandermani
  3. 1

    Si vous voulez attendre pour un angulaire de ressources ($resource) pour être résolus avant qu'un changement d'itinéraire, alors vous aurez besoin de retourner la $promise.

    $routeProvider.when('/tickets', {
    resolve: {
        'tickets': function ('Ticket') {
            //do this to resolve the async call prior to controller load
            return Ticket.query().$promise;

            //this will resolve 'tickets' during/after controller load
            return Ticket.query();
        }
    },
    controller: ...
});
    InformationsquelleAutor Aleck Landgraf