Question

我试图在node.js中将用户上传的文件设为私有。我使用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 '';
        }

    };

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

    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上执行。

首先尝试加载控制器中的所有照片：

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}}" ... />

通过ajax加载图像时获得无限循环

1 个答案: