javascript - getting infinite loop when loading images via ajax -

javascript - getting infinite loop when loading images via ajax -

i'm trying create user uploaded files private in node.js. , i'm using angular serve file in client side.

<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>

here's function i'm using file.

me.getphoto = function(url, id, message_type){ if(message_type == 'photo'){ requestsservice.getphoto(url, id).then(function(response){ console.log(response); //returns data-uri of image homecoming response; }); }else{ homecoming ''; } };

the function calls getphoto method requestservice makes request node.js server:

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); homecoming deferred.promise; };

here's error i'm getting:

error: [$rootscope:infdig] 10 $digest() iterations reached. aborting! watchers fired in lastly 5 iterations: []

the server returns data-uri representing image. tried using ng-click phone call same method , returning info uri fine:

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

any ideas?

update

i tried returning info i'm getting http request straight still same error.

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

avoid using async function calls in ng-src. look in ng-src executed on every digest.

try loading photos in controller first:

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

in template use:

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

javascript ajax angularjs node.js