alidrongo alidrongo - 3 months ago 8
AngularJS Question

Angular printing out $scope function instead of returning value (when called from DOM)

I'm trying to load an image from Google Drive into an image elemnent in my Angular application:

<div >
<div ng-repeat="attachment in event.attachments">
<img src="{{getImage(attachment.fileId)}}"/>
</div>
</div>


The code in my controller:

$scope.getImage = function(fileId){
return 'http://drive.google.com/uc?export=view&id='+fileId;
};


When I run the code the request URL show that the function name is being printed out instead of returning the image URL. Here is the request:


http://localhost:3000/%7B%7BgetImage(attachment.fileId)%7D%7D


Can anyone help me to get the image to load?

Thanks!

Answer

Use ng-src to wait for the interpolation to take place, like this:

<img ng-src="{{getImage(attachment.fileId)}}"/>

More on ng-src here.

Comments