Bild dynamisch laden mit angularjs

Question

Ich entwickle gerade eine Ionic App, die angularJs verwendet. Ich habe auch eine Jhipster gemacht REST-Web-Service-Provider-Anwendung läuft im Web, die Daten für meine App zur Verfügung stellt.

Was ich derzeit mache ist, den kompletten (Text + Bilddaten) JSON mit REST API Anruf von jhipster zu bekommen. Textdaten umfassen ID, Name, Adresse usw. Informationen von Menschen und Bilddaten ist das Bild von Menschen.

Ich möchte die Bilder laden, d. H. Den API-Aufruf für Textdaten in Brand setzen und nachdem die Textdaten auf der Seite gerendert wurden, dann jedes Bild einzeln aufrufen.

Ich habe bereits separate API bereit für Textdaten und eine andere API, um einzelnes Bild nach ID zu erhalten.

Nein, hier ist mein Problem Ich möchte eine Möglichkeit, meine API-Aufruf in <img> Tag auslösen. Nachdem die Liste gerendert ist, nimmt die Direktive/service, die <img> zugeordnet ist, den people.id des Benutzers an und übergibt ihn an die Funktion, die dann mein API-Aufruf-Bild auslöst, bringe die Antwort (Bild) und binde sie an <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

Sie könnten die Dinge ein wenig ändern, damit dies funktioniert. Anstatt beispielsweise die Daten so zu binden, wie Sie es gerade tun, ändern Sie sie einfach in eine Funktion, die das Ganze auf einmal zurückgibt.

Etwas wie: <img ng-src="{{getMyData(yourID)}}" >

dann innerhalb der getMyData Funktion, die Sie tun, was Sie benötigen, können Sie den db Anruf Feuer und zurück, was Sie brauchen. Sie können auch einen ng-Umhang anwenden, da die Ausführung des Aufrufs eine Weile dauert und Sie Ihre Daten zurückbekommen.

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