CODEWITHSUNDEEP
javascriptangularjs
Ronnie
Ronnie

Reputation: 11198

image not updating using ng-src in Angular

In my controller, I call a service. This service makes a request to a PHP file that gives me a URL to an image.

The reason for this is the image resides inside a "Media Vault" meaning I need to generate a hashed URL like so in order to view it:

http://xxxx.vo.llnwd.net/o35/s/xxx/test/thumbs/slide1.jpg?e=1365006137&h=5852aeaf5beeeebff05a601801b61568

The URL above has already expired so you won't see anything from that specific link.

My image tag is like so:

<img id="thumbnail" class="glow" ng-src="{{currentThumb}}" width="200" height="150"/>

currentThumb in my controller is:

$scope.currentThumb = ImageService.getImage({
    'type' : 'thumb',
    'index' : $scope.currentIndex + 1,
    'location' : $scope.location
});

and my service looks like this:

app.factory('ImageService', function($http)
{
    var image = null;
    return {
        promise:null,
        getImage: function($data)
        {
            this.promise = $http.post('resources/auth.php',$data, {timeout:20000}).success(function(response)
            {
                image = response;
                log(response);
            })
        }
    }
});

The current ImageService successfully returns a URL (at least it shows the url in the console) and when clicking the log result in the console, the image loads fine. Any reason why the image isn't updating?

Upvotes: 4

Views: 13225

Answers (1)

Justen
Justen

Reputation: 4869

I'm not sure how you need to call this, but another way that might be better is to call that ImageService.getImage() in a resolve block of the controller. That way its all loaded before the controller and view taken care of.

jsfiddle

http://jsfiddle.net/HYDmj/1/

view

<div ng-app="main">
  <div ng-controller="ExampleController">
    <h1>currentThumb</h1>
      <img ng-src="{{currentThumb.data}}">
  </div>
</div>

code

var app = angular.module('main',[]);

app.factory('ImageService', function($http)
{
    image = null;
    return {
        getImage: function($data)
        {
            image = $http.post('http://dopserv1.dop.com/test/auth.php', $data, {timeout:20000})
            return image
        }
    }
});

function ExampleController($scope, ImageService)
{
    $scope.currentThumb = ImageService.getImage({
        'type' : 'thumb',
        'index' : 1,
        'location' : 'http://digitalout.vo.llnwd.net/o35/s/mobilevforum/test/'
    });
}

Upvotes: 2

Related Questions