javascript - AngularJS:下载二进制图像时的异步问题

Question

我正在尝试使用 $http 从我正在使用的服务中获取二进制图像，但我认为我遇到了异步问题。

这是我在 Controller 中使用的代码:

$scope.downloadImage = function(imgReady, index) {
    if (imgReady == false) {

        for (var i = $scope.vehicles[index].events.length - 1; i >= 0; i--) {
            var config = {
                method: 'POST',
                url: '/Events/SnapShot',
                data: $scope.vehicles[index].events[i],
                cache: false
            }

            RequestService.makeApiRequest(config).success(function(response) {
                console.log(response.data); // shows the binary data
                $scope.vehicles[index].events[i].snapshot = response.data; // Results in: TypeError: Cannot set property 'snapshot' of undefined
            });

            console.log($scope.vehicles[index].events[i]); // Logs event object without snapshot property
        };
    }
}

这是我认为的代码:

<li ng-repeat="vehicle in vehicles" ng-init="isHidden=false; imgReady=false;" class="event-list-animation">
    <div ng-click="isHidden=!isHidden; downloadImage(imgReady, $index); imgReady=true" class="heading" ng-hide="vehicle.events.length < 1">
        <h1>Vehicle: {{ vehicle.name }}</h1>

        <span ng-class="(isHidden == false) ? 'details-toggle' : 'details-toggle open'">
            expand / collapse
        </span>
    </div>
    <div ng-show="isHidden" class="body event-show-hide-animation">
        <div class="wrap" ng-repeat="event in vehicle.events">
            <ul>
                <li>Event: {{ event.number }}</li>
            </ul>

            <img ng-src="{{ event.snapshot }}" />
        </div>
    </div>
</li>

所以我有几辆车，每辆车下都有事件，我试图抓取每个事件的图像。但它似乎导致了异步问题。我也尝试过:

$scope.vehicles[index].events[i].snapshot = RequestService.makeApiRequest(config).success(function(response) {
    return response.data;
});

但这似乎会导致以下问题:GET http://localhost:3000/%7B%7D 404(未找到)

这是尝试加载的二进制图像数据吗？这是我第一次使用二进制图像数据，I have been told to use ng-src指令使其正确加载。

感谢有关此问题的任何帮助，谢谢。

Answer 1

我认为 TypeError 是因为您错误地捕获了函数闭包中的 i。

请尝试这个:

RequestService.makeApiRequest(config).success(function(j) {
    return function(response) {
        console.log(response.data);
        $scope.vehicles[index].events[j].snapshot = response.data;
    }
}(i));