1

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

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

::::angular js method in the controller scope::::

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

This method call from ng-src triggers an infinite loop. I am suspecting the http request is doing this. I have no clue what is going wrong here.

Can someone please help me this?

Matt
  • 1,013
  • 8
  • 16
pg238
  • 1,145
  • 2
  • 15
  • 26
  • 3
    So, you need to make an HTTP call to get the URL of each image? That seems suspicious. BTW, your function doesn't return anything. I guess you simply need `` – JB Nizet Aug 26 '15 at 16:02
  • Yes, JB Nizet. The intention here is to use the id to make a http call to get the acutual image. The image here is a png image. Is something wrong with this logic? I tried using the url, but with the setup we have it is not possible to use the url directly (because of some security reasons) – pg238 Aug 26 '15 at 16:13
  • What ng-src expects is not the image. It's the URL of the image. And the URL of the image is `http://images/getImage.do?imageId={{id}}`. Once the image src attribute is set, the browser will do the HTTP request to download the image. You must not do it yourself. And BTW, even if it did expect the image, your function doesn't return anything. And even if it did return something, Angular would call it at each $apply, and your code would re-download it again and again and again. So there are many, many things wrong with your logic. – JB Nizet Aug 26 '15 at 16:14
  • Thanks, JB Nizet. I think I understood the concept here. Man!! Angular JS in confusing :) – pg238 Aug 26 '15 at 16:22

1 Answers1

1

The infinite loop is caused because:

  1. $http will call $apply function implicitly, which will start $digest
  2. $digest evaluates the ng-src again.
  3. Then ng-src will call the function getImage
  4. getImage will invoke the $http ...

You can just use ng-src="data:image/png;base64,{{imageSrc[id]}}" in HTML, and in controller:

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

After the for loop, the imageSrc object will be like:

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

Then the imageSrc will be updated automatically after the $http request finishes.

Joy
  • 9,430
  • 11
  • 44
  • 95
  • Thanks, Joy. Don't we have to wrap the http call inside a method? Can I just call $http in my controller? – pg238 Aug 26 '15 at 16:15
  • I have to use the id to get the image from the server. How can I do it here? – pg238 Aug 26 '15 at 16:16
  • Thanks, Joy. What does imageSrc[id] do? In the example you gave above, are you assuming that ids are saved in some data structrue, and you are getting the id from the structure? – pg238 Aug 26 '15 at 16:31
  • Your url `http:/images/getImage.do?imageId=` is getting the binary content of the image or only the url string of the image? – Joy Aug 26 '15 at 16:33
  • It is getting the binary content of the image – pg238 Aug 26 '15 at 16:35
  • Thanks, Joy. So, if we have 100 images, Are all the 100 images placed correctly (if I am using a list sorted by the id), after the for loop is processed? – pg238 Aug 26 '15 at 16:38
  • Yes. The 100 requests are simultaneously issued and fill the `imageSrc` object after return. – Joy Aug 26 '15 at 16:40
  • Awesome! one last question. I'm gettting all bytes from server. Do I have to use base64 in ng-src – pg238 Aug 26 '15 at 16:41
  • Please check: http://stackoverflow.com/questions/20088554/what-does-dataimage-pngbase64-mean – Joy Aug 26 '15 at 16:45
  • Thanks much, Joy. This is very useful information. I shall take a look at the link you posted. I really appreciate your help with my question – pg238 Aug 26 '15 at 16:46
  • @user4122421 My pleasure :) Please kindly upvote/accept if it helps you. – Joy Aug 26 '15 at 16:47