javascript - 通过ajax加载图像时出现无限循环

Question

我试图在 node.js 中将用户上传的文件设为私有(private)。我正在使用 angular 在客户端提供文件。

<div ng-repeat="message in messages">
    <div class="details" ng-if="message.type == 'photo'">
    <img ng-src="{{ chat_ctrl.getPhoto(message.photo, message.conversation_id, message.type) }}"  class="message-photo" alt="{{ message.text }}">
    <p>{{ message.text }}</p>
    <small am-time-ago="message.timestamp" am-preprocess="unix"></small>
    </div>
</div>

这是我用来获取文件的函数。

    me.getPhoto = function(url, id, message_type){

        if(message_type == 'photo'){            
            RequestsService.getPhoto(url, id).then(function(response){
               console.log(response); //returns the data-uri of the image
               return response;
            });
        }else{
            return '';
        }

    };

该函数从向 node.js 服务器发出请求的 RequestService 调用 getPhoto 方法:

    function getPhoto(url, id){

        var deferred = $q.defer();

        var request = {
            method: 'GET',
            url: base_url + '/uploads' + url,
            params: {'url': url, 'id' : id}
        };

        $http(request)
            .success(function(response){
                $timeout.cancel(me.timer);
                deferred.resolve(response);
            })
            .error(function(data){
                deferred.reject();  
            });

        me.requestTimeout(deferred);

        return deferred.promise;        

    };

这是我遇到的错误:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []

服务器返回表示图像的数据 uri。我已经尝试使用 ng-click 调用相同的方法并返回数据 uri:

<img src="" ng-click="chat_ctrl.getPhoto(message.photo, message.conversation_id, message.type)"  class="message-photo" alt="{{ message.text }}">

有什么想法吗？

更新

我尝试直接返回从 http 请求中获取的数据，但我仍然遇到同样的错误。

$http(request)
            .success(function(response){
                //$timeout.cancel(me.timer);
                //deferred.resolve(response);
                return response;
            })
            .error(function(data){
                return data;
                //deferred.reject();    
            });

Answer 1

避免在 ng-src 中使用异步函数调用。 ng-src 中的表达式在每个 digest 上执行。

首先尝试在 Controller 中加载所有照片:

loadPhotos();

loadPhotos = function() {
    for(var i=0,max=messages.length; i<max; i++) {
        me.getPhoto(i);
    }
};

getPhoto = function(index){
    if(messages[index].message_type == 'photo'){            
        RequestsService
            .getPhoto(messages[index].photo, messages[index].conversation_id)
            .then(function(response){
                messages[index].photoSrc = response;
            });
    }
};

在您的模板中使用:

<img ng-src="{{message.photoSrc}}" ... />