Web Standards, JavaScript, and Kittens

Menu

AngularJS Tip – Avoid Multiple Variables in ng-src

Before I start, let me be clear I’m still learning AngularJS and this “tip” may be 100% wrong. I just ran into this with an application and most likely there is a better way to address what I did.

In the application I’m building, I’ve got a detail page that displays an image. The site uses an image folder that uses a subdirectory for the size of the image, so for example, the base image folder is: foo.com/products/images. For the thumbnail of product X, the image would be: foo.com/products/images/thumbs/x.jpg. For the larger size, it would be: foo.com/products/images/large/x.jpg.

To make things simpler, I used a partial that looked like this.

<img ng-src="{{imageroot}}/{{product.image}}">

For folks who don’t know Angular, the ng-src directive ensures that when the partial is loaded, the browser doesn’t try to load an invalid image. If I had used src=”…”, there would be two network requests – first for the tokenized version of the URL and then for the real value.

I thought this was working fine, but I then noticed something odd in my network tools – a request for foo.com/products/images/thumbs. From what I can see, it looks like Angular sets the src of the image element as soon as it is able to replace one of the tokens.

To fix this, I simply edited the template to use one variable and I set that value properly in my controller.

Share this:

Post navigation

Sponsors

The Author

I'm Raymond Camden, a developer advocate for IBM. My primary focus is on MobileFirst, hybrid mobile development, and client-side technologies. If you would like me to speak to your group, just drop me a line.