Ng-srcがスコープの関数を呼び出せません

Question

私はngRepeatを持っていて、オブジェクトのリストを反復して表示します。これらのオブジェクトにはイメージは含まれていませんが、IDを使用してイメージを取得できます。 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は実際には何も返さないということです。約束から値を返そうとしているようですが、非同期に返るので、戻り値は$scope.getLogoByCourseから常にundefinedになります。

すべてのURLをまとめてアレイにロードすることを検討してください。次に、$index変数を使用してng-repeatに各URLを添付することができます。あなたのテンプレートで

その後

$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] }}" />