ng-srcのng-srcはアップデートされていません

Question

私はangularjsを初めて使っています。ここでは、ng-repeatからimg idを取得して関数に渡し、それは何らかのエラーを表示します。助けてください。

HTML

<tr data-ng-repeat="(key, list) in listOfProperties"> 
    <img ng-src="{{getImageUrl(key)}}"> 
</tr> 

JS

$scope.getImageUrl=function(key){ 

return factory.getImgUrl(key).then(function(data){ 
    return data 
}); 

} 

FACTORY

getImgUrl:function(key){ 
    return $http({ 

      method:"GET", 
      url:somedomain.com/getCoverPicture", 
      //This domain will return a image string. 
      params:{'key':key} 

     }).then(function(response){ 

      return response.data; 

     }) 

} 

Answer 1

あなたgetImgUrl機能は、画像のURLを返しません。これは、というHTTP応答の約束を返します。その本体にはURLが含まれていることが期待されます。

ng-src URLを期待してください。

さらに、getImageUrl(key)は、eashダイジェストサイクルでAngularによって評価されます。ダイジェストサイクルが実行されるたびにHTTPクエリを作成する必要はありません。

したがって、イメージURLを前もって取得する必要があります（コントローラーがインスタンス化されているとき、またはlistOfPropertiesを取得したとき）、それらのオブジェクトをオブジェクトに格納する必要があります。あなたには、いくつかの重要なを逃しているように見えるので、角度の約束についてthis article I wroteをお読みください

<tr data-ng-repeat="property in listOfProperties"> 
    <td><img ng-src="{{property.imgUrl}}" /></td> 
</tr> 

：

listOfProperties.forEach(function(property) { 
    factory.getImgUrl(property.key).then(function(response) { 
     property.imgUrl = response.data; 
    }); 
}); 

そして、あなたのビューで：あなたのlistOfPropertiesと仮定すると、それがあるべきな配列、およびでないオブジェクトでありますそれらについてのもの。

Answer 2

はこの

<tr ng-init="getImageUrl(key);" data-ng-repeat="(key, list) in listOfProperties"> 
     <img ng-src="{{list.url}}"> 
    </tr> 

を試してみてください。

$scope.getImageUrl = function(key, list){ 

    return factory.getImgUrl(key).then(function(data){ 
     list.url = data; 
    }); 
}