ng-repeating中に現在の要素に基づいてデータベースからデータを取得する方法

Question

私はspring webappをビルドしていて、divテーブルを持っていて、の配列からいくつかのデータをng-repeatで表示したいとします。このような何か：私が欲しいもの

<div ng-repeat="element in elements> 
{{element.id}} 
</div> 

は、データベース内の別のテーブルに格納されている現在のelementに関するいくつかの追加のデータを取得するので、このような何か：

... 
{{getImage(element.id)}} 
... 

私は、データを取得するために、残りのアプローチを使用していますデータベースから、httpリクエストを取得し、$scopeにデータを保存して送信します。それはちょうどHTTPリクエストを送信するの無限ループを開始

$scope.getImage = function(id){ 

      $http.get("services/rest/getImage/" + id).then(function(response){ 
       return response.data; 
      }, 
      function(response){ 

      }); 

     } 

を、と私はそれが私が要素を取得したいと、javascriptを要求非同期で何かをしなければならないと思います。このような

何かが動作しません。データベースから取得し、同時に他のものに割り当てることができます。

どうすれば解決できますか？

Answer 1

ng-repeatの内部で画像を取得し、imgタグに設定する指示文を作成する必要があります。

angular.module('app').directive('imageSetter',[function() { 
    return { 
     restrict: "A", 
     link: function(scope, element, attrs, ngModelCtrl) { 
      $http.get("services/rest/getImage/" + scope.id).then(function(response){ 
       attrs.$set('src', response.data); 
      }, 
      function(response){ 
      }); 
     } 
    }; 
}]); 

使用法：<img src="" image-setter>

を私はあなたがNGリピートIDの間にも、あなたのHTTP呼び出しから画像URLまたはbase64形式データを返すしている私は idを取得するために scope.idを使用しています以下のコードでようスコープで利用できるようになりますと仮定しています