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函数不会返回图片的网址。它返回HTTP响应的 promise ，其正文包含（希望）一个URL。

ng-src期待网址。

此外，getImageUrl(key)由Angular在eash摘要周期进行评估，并且每次摘要周期运行时你都不想进行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，因为您似乎错过了一些有关它们的重要内容。

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

ng-repeat中的ng-src没有更新

2 个答案: