I'm using the following snippet to display an attachment inside an angular view template:

<div ng-repeat="d in data">
    <img ng-src="{!URLFOR($Action.Attachment.Download, {{d.AttachmentId}} )}">

But when my page loads, the image attachment is not dieplaying. and when I inspect it I see the following:

<img ng-src="{!URLFOR($Action.Attachment.Download, 00Pi000000T7tJ6EAJ )}">

So the Id is being returned correctly but I'm not seeing it. Could anyone point out the issue here?

I've also tried:

<img src="{!URLFOR($Action.Attachment.Download, d.AttachmentId )}">

But in thsi case I was seeing the following in my DOM:

<img src="{!URLFOR($Action.Attachment.Download, d.AttachmentId )}">

So the attachment id wasn't actually returning properly.


The {! } expression is evaluated at the server-side providing it is a Visualforce page of component that is being output whereas the {{ }} expression is evaluated at the client-side in the browser. The two don't mix well and your Angular app will be cleaner if you stick to just client-side evaluation as much as possible.

From what you are seeing the {! } is not being processed which makes sense if your template is e.g. in a static resource. A solution to getting Visualforce expressions evaluated is to do that evaluation in the index page (that you make a Visualforce page) and then add the resulting JavaScript object to the Angular app as a constant. That pattern is illustrated in this blog post Passing platform configuration to an AngularJS app.

For your attachment download, you may end up just having to hard code the /servlet/servlet.FileDownload?file= somewhere (but make sure you define it in one place only) and rely on that not changing anytime soon. Or you can write your own @RestResource end point and use that.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.