javascript - Angularjs $httpは応答を待ちます

Question

私はjavascript/angularjsの初心者です。一部の要素でマウスオーバーが行われたときに、ブートストラップ ポップオーバーを表示したいと考えています。

そのためのディレクティブを作成しました

(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);

ディレクティブの値は関数です

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

関数 vcard(id) は私の angularjs コントローラーで定義されています。データが localstorage に既に存在するかどうかを確認し、存在する場合はデータを返します。それ以外の場合は、$http get リクエストを実行し、データを 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);
};

$http が promise を返すため、ディレクティブで未定義の値を取得しています。関数getVCardが同期的に戻ることを確認するにはどうすればよいですか?

グーグルで検索した後、いくつかの結果を読みました。ただし、コールバックを使用することをお勧めします。しかし、コールバックがこれを同期させる方法がわかりません。どんな助けでも大歓迎です。

更新 1 (Foo L のコメントに応じて) 複数の場所で同じディレクティブを使用することを計画していました。vcard や製品情報などのポップオーバー。唯一異なるのは、pop-over ディレクティブへの引数です。そうすれば、ディレクティブはポップアップを表示するだけで済みます。データを取得する場所は、ディレクティブに渡される別の関数になります