Question

:::::: hmtl logic :::::

<img class="imageCss" ng-src="{{getImage(id)}}">

控制器范围内的

:::: angular js方法::::

$scope.getImage = function getImage(id){
    console.log("in getImages");
    console.log("id " + id);

    var testData = $http.get('http:/images/getImage.do?imageId='+id).then(function(result) {
        console.log(result);
        return result;
    });
    //console.log("testData " + testData);
}

来自ng-src的此方法调用会触发无限循环。我怀疑http请求是这样做的。我不知道这里出了什么问题。

有人可以帮助我吗？

Answer 1

导致无限循环，因为：

$http会隐式调用$apply函数，这将启动$digest
$digest再次评估ng-src。
然后ng-src将调用函数getImage
getImage将调用$http ...

您可以在HTML和控制器中使用ng-src="data:image/png;base64,{{imageSrc[id]}}"：

$scope.imageSrc = {};
for (var i = 0; i < ids.length; i++) {
    var id = ids[i];
    $http.get('http:/images/getImage.do?imageId='+id).then(function (data) {
        $scope.imageSrc[id] = data;
    });
}

for循环后，imageSrc对象将如下：

{
    1: 'binary content of the image',
    11: 'binary content of the image',
    20: 'binary content of the image',   
    ...
}

然后在imageSrc请求完成后，$http将自动更新。

使用$ http的data-ng-src方法调用进入无限循环

1 个答案: