ng-repeat 中的 ng-src 不更新答案

【问题标题】：ng-src in ng-repeat not updatingng-repeat 中的 ng-src 不更新
【发布时间】：2016-11-14 20:08:30
【问题描述】：

我对 angularjs 完全陌生，在这里我想做的是从 ng-repeat 获取一个 img id 并将其传递给一个函数并返回一个图像字符串，但它显示了某种错误。请帮忙。

HTML

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

$scope.getImageUrl=function(key){

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

}

工厂

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;

        })

}

【问题讨论】：

你可以在下面添加错误
这就是我得到的 angular.min.js:118 错误：[$rootScope:infdig] errors.angularjs.org/1.5.8/$rootScope/…

标签： angularjs angularjs-ng-repeat

【解决方案1】：

您的 getImgUrl 函数不返回图像的 URL。它返回一个 promise 的 HTTP 响应，其正文包含（希望）一个 URL。

ng-src 期望 URL。

此外，getImageUrl(key) 在每个摘要周期由 Angular 评估，您真的不想在每次摘要周期运行时都进行 HTTP 查询。

因此，您需要预先获取图像 URL（当控制器被实例化时，或者当您获取 listOfProperties 时）并将它们存储在您的对象中。假设你的 listOfProperties 是一个数组，它应该是，而不是一个对象：

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

在你看来：

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

请阅读 this article I wrote 关于 Angular Promise 的内容，因为您似乎错过了一些关于它们的重要内容。

【讨论】：

【解决方案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;
     });
}

【讨论】：