Angularjs $http attendre pour la réponse

Je suis un newbie, javascript/angularjs. J'en veux pour preuve un bootstrap liste lors du passage de la souris est fait sur certains éléments.

J'ai créé une directive pour que

(function(angular, app) {
  app.directive('popOver',["$window","$http",function($window,$http){
    return function(scope,elem,attrs){
      elem.on('mouseover',function(){
        console.log('mouseover');
        var data = scope.$apply(attrs.popOver);
        console.log('in directive again');
        console.log(data);
      });
    };
  }]);
})(angular, app);

la valeur de la directive est une fonction

<span class="asdf" pop-over="getVCard(id)">name</span>

la fonction vcard(id) est définie dans mon angularjs contrôleur. Il vérifie si les données sont déjà dans localstorage et si présent, renvoie les données. sinon il n' $requête http get et stocke les données dans localstorage.

$scope.getVCard = function(id){

  var vcardKey = vcardKeyPrefix+id;

  var vCardFromLS = localStorageService.get(vCardKey);
  if(vCardFromLS){
    return localStorageService.get(vCardKey);
  }

  $http.get(app.common.vcardUrl(id)).
    success(function(data){
      localStorageService.set(vCardKey,data);
    }).
    error(function(error){
      F1.common.error(data,function(){});
    });

    return localStorageService.get(vCardKey);
};

Depuis $http renvoie promesse, j'obtiens une valeur de undefined dans mon directive. Comment puis-je m'assurer que la fonction getVCard renvoie de façon synchrone?

J'ai lu un certain nombre de résultats après une recherche sur google. Mais l'a suggéré l'idée est d'utiliser les callbacks. Mais je ne suis pas sûr de savoir comment les rappels fera ce synchrone. Toute aide est appréciée.

Mise à JOUR de 1 (en réponse à Toto L du commentaire)
j'avais l'intention d'utiliser la même directive en plusieurs endroits. popovers pour cartes de visite et informations sur les produits et ainsi de suite. La seule chose qui diffère c'est l'argument de la pop-directive sur les. De cette façon, la directive s'inquiète juste de l'affichage de la popup. Où obtenir les données seront dans une fonction distincte qui est transmis à la directive

Qu'en est juste de passage dans la fonction & id séparément dans la directive? Vous pouvez appeler la fonction avec l'id en paramètre à l'intérieur & mettre en place un scope.$watch qui va déclencher lorsqu'elle retourne avec succès.
j'avais l'intention d'utiliser la même directive en plusieurs endroits. popovers pour cartes de visite et informations sur les produits et ainsi de suite. La seule chose qui diffère c'est l'argument de la pop-directive sur les. De cette façon, la directive avez à vous soucier de simplement afficher le popup. Où obtenir les données seront dans une fonction distincte qui est transmis à la directive.
Utiliser les ui-bootstrap.
pouvez-vous m'aider avec un exemple? Je ne suis pas clair comment on peut faire cela avec ui-bootstrap.

OriginalL'auteur Anirudhan J | 2013-06-28

  1. 10

    Vous ne pouvez pas forcer $http.get() en synchronisme. Depuis $http.get() est inévitablement asynchrone, vous ne pouvez retourner une promesse de valeur, la valeur elle-même.

    Et parce que vous avez besoin de le faire quand $http.get() est appelé, vous devez également remettre une promesse sous la condition d'autres - quand vCardFromLS est correctement récupérées à partir localstorage. Cela garantit que l'objet renvoyé à un appel de $scope.getVCard() a un .then() méthode, c'est à dire qu'il est une promesse, indépendamment de si $http.get() a été appelé ou pas.

    De sorte que le code devrait être quelque chose comme ceci :

    $scope.getVCard = function(id) {
    var vcardKey = vcardKeyPrefix + id;
    var vCardFromLS = localStorageService.get(vCardKey);
    var dfrd = $q.defer();
    if(vCardFromLS) {
        dfrd.resolve(localStorageService.get(vCardKey));
    }
    else {
        $http.get(app.common.vcardUrl(id)).success(function(data) {
            localStorageService.add(vCardKey, data);//.add() rather than .set() ?
            dfrd.resolve(data);
        }).error(function(error) {
            F1.common.error(data, function() {
                dfrd.reject('$http.get(app.common.vcardUrl(id)) failed');
            });
        });
    }
    return dfrd.promise;
};

    Maintenant, vous devez vous assurer que la réponse à $scope.getVCard() sont traités de façon appropriée, par exemple :

    $scope.getVCard(id).then(function(data) {
    //success - do whatever is required with data
}, function(reason) {
    //failure - log and/or display `reason` as an error message
})

    EDIT:

    Mon "... vous doit également le retour d'une promesse en vertu de l'autre condition de ..." est une exagération.

    J'aurais dit, "... vous peut, de faire des choses simples, de retour d'une promesse en vertu de l'autre condition de ...".

    Une autre possibilité est de branche selon qu'une Promesse ou un autre type d'objet/de la valeur a été retourné. Cependant, c'est salissant et sera généralement conduire à une certaine duplication de code.

    C'est génial! Je n'ai jamais pensé de retour d'une promesse, d'nomatter si les données étaient disponibles dans LocalStorage ou pas.

    OriginalL'auteur Beetroot-Beetroot