Ng-src не вызывающая функция из области

Question

У меня есть ngRepeat, который выполняет итерацию по списку объектов и отображает их. Эти объекты не содержат никаких изображений, но идентификатор может использоваться для извлечения изображения. В содержимом ngRepeat я хочу показать изображение, соответствующее объекту, и поэтому я вызываю функцию внутри ngSource для захвата изображения, соответствующего текущему объекту. Однако ngSource не загружается на фактическую страницу.

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> 

Директива Отрывок:

$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; 
     } 
    ); 
} 

Содержание тега изображения на загруженной странице:

<img class="logo-img"> 

Answer 1

Проблема заключается в том, что $scope.getLogoByCourse фактически не возвращать ничего. Похоже, вы пытаетесь вернуть значение из обещания, но поскольку он возвращается асинхронно, вы всегда получите undefined в качестве возвращаемого значения от $scope.getLogoByCourse.

Возможно, вы захотите рассмотреть возможность сразу получить все URL-адреса и загрузить их в массив. Затем вы можете присоединить каждый URL-адрес в ng-repeat, используя переменную $index.

$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); 
} 

Затем в шаблоне:

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