Ng-src keine Funktion vom Bereich aufrufen

Question

Ich habe eine ngRepeat, die durch eine Liste von Objekten iteriert und zeigt sie an. Diese Objekte enthalten keine Bilder, aber die ID kann zum Abrufen des Bildes verwendet werden. Im Inhalt von ngRepeat möchte ich das Bild anzeigen, das dem Objekt entspricht, und so rufe ich eine Funktion innerhalb einer ngSource auf, um das Bild zu erhalten, das dem aktuellen Objekt entspricht. Die ngSource kann jedoch nicht auf der aktuellen Seite geladen werden.

HTML:

<div class="list-group"> 
    <a ng-click="courseSelected(course.course_id)" class="list-group-item" ng-repeat="course in searchResultData.courseList" id="searchResults"> 
    <div> 
     <img ng-src="{{getLogoByCourse(course)}}"/> 
     <h4 class="list-group-item-heading">{{course.name}}, {{course.city}}, {{course.state}}</h4> 
     <p class="list-group-item-text miscData" ng-show="course.price"><span>Price: {{course.price}}</span></p> 
     <p class="list-group-item-text miscData"> 
      <span>Phone number: {{course.phone}}</span><br/> 
      <span>Address: {{course.address}}</span><br/> 
      <span>Website: {{course.website}}</span> 
     </p> 
    </div> 
    </a> 
</div> 

Richtlinie Snippet:

$scope.getLogoByCourse = function(course) { 
    console.log("Getting logo"); 
    courseFactory.getLogoByID(course.course_id) 
     .then(function(result){ 
      console.log("logo: ", result); 
      result = "app/images/directory/" + result.data[0]; 
      return result; 
     } 
    ); 
} 

$scope.getImageByCourse = function(course) { 
    courseFactory.getImagesByID(course.course_id) 
     .then(function(result){ 
      console.log("Image: ", result); 
      result = "app/images/directory/" + result.data[0]; 
      return result; 
     } 
    ); 
} 

Inhalt des Bild-Tag auf geladenen Seite:

<img class="logo-img"> 

Answer 1

Das Problem ist, dass $scope.getLogoByCourse eigentlich nichts zurück. Es sieht so aus, als ob Sie versuchen, einen Wert aus einem Versprechen zurückzugeben, aber da das asynchron zurückkommt, erhalten Sie immer undefined als Rückgabewert von $scope.getLogoByCourse.

Sie möchten möglicherweise alle URLs gleichzeitig abrufen und sie in ein Array laden. Dann können Sie jede URL in der ng-repeat mit der $index Variable anhängen.

$scope.logos = []; 

for (var i = 0; i < searchResultData.courseList.length; i++) { 
    (function (j) { 
     var course = searchResultData.courseList[j]; 
     courseFactory.getImagesByID(course.course_id) 
      .then(function (result) { 
       console.log("Image: ", result); 
       result = "app/images/directory/" + result.data[0]; 
       $scope.logos[j] = result; 
       $scope.$apply(); 
      }, function (error) { 
       $scope.logos[j] = null; 
      }); 
    )(i); 
} 

Dann in Ihrer Vorlage:

<img ng-src="{{ logos[$index] }}" />