anglejsで画像を動的にロード

Question

angularJsを使用しているIonicアプリを現在開発中です。また、Jhipsterを作成し、REST WebサービスプロバイダアプリケーションをWeb上で実行して、アプリケーションにデータを提供しています。

私が現在行っていることは、jhipsterのREST API呼び出しで完全な（テキスト+画像データ）JSONを取得することです。テキストデータには、ID、名前、住所などの情報が含まれており、イメージデータは人物の写真です。

私がしたいのは、ロード時に画像を読み込む、つまりテキストデータのAPI呼び出しを呼び出すことです。テキストデータがページにレンダリングされた後、すべての画像を個別に呼び出します。

すでに別のAPIがテキストデータ用に用意されており、別のAPIがidに従って単一のイメージを取得しています。

ここに私の問題があります。<img>タグでAPI呼び出しを呼び出す方法が必要です。リストがレンダリングされた後、<img>に関連付けられたディレクティブ/サービスは、ユーザのpeople.idを受け取り、それを関数に渡します。これにより、API呼び出しがイメージを取得し、レスポンス（イメージ）が返され、<img>にバインドされます。

<div class="list"> 
    <div class="item item-thumbnail-left item-text-wrap item-avatar" 
     ng-repeat="item in peoples "> 

     <img ng-src="data:image/png;base64,{{item.image}}" alt="{{item.name}} Photo" err-src="img/people.png"> 

     <h2> {{item.firstName}} </h2> 
     <span> {{item.emailId}} </span> 

    </div> 
</div> 

Answer 1

これを行うには、少し変更することができます。たとえば、今のようにデータをバインドするのではなく、一度にすべてを返す関数に変更するだけです。以下のような

何か：<img ng-src="{{getMyData(yourID)}}" >

その後、あなたが必要なものを行うgetMyData関数内、あなたはデシベルコールを発射し、何が必要返します。コールを実行してデータを取り戻すには時間がかかりますので、ng-cloakも適用できます。

$scope.getMyData = function(id) 
     { 
      //api work 
      //create return string 
      return 'the whole thing' 
     }