AngularJS directive variable interpreted as text before interpolated as variable

Question

I have a fairly simple ng-repeat that iterates an AngularJS directive to display images from an array of objects, where each JSON object has a img attribute with a URL of the image. Everything works fine except in the network tools I can see that the browser is trying to load an image source URL as {{ data.img }} before being interpolated into it's actual value, it's driving me crazy trying to figure out why this is happening.

Here are the relevant pieces of my code:

index.html

<div ng-repeat="data in obj">
    <feed-item></feed-item>
</div>

feedItem.html (directive)

<div class="item">
    <img src="{{ data.img }}" />
</div>

Angular directive

app.directive("feedItem", function() {
   return {
        restrict: 'E',
        templateUrl: 'assets/directives/feedItem.html',
        replace: true
   };
});

This results in the images rendering fine, but as mentioned the following shows up in the network tools:

All of the 2 images from the array of JSON objects are loaded fine as you can see, but I have the extra request the browser is trying to make, and the "initiator" column just says "other" which is not very helpful. Any idea why this request is being sent?

have you tried using ng-src?

matthewdaniel
– matthewdaniel

2015-12-06 22:14:00 +00:00
Commented Dec 6, 2015 at 22:14 — matthewdaniel
– matthewdaniel, Commented Dec 6, 2015 at 22:14

Caleb O'Leary · Accepted Answer · 2015-12-06 22:15:36Z

3

As matthewdaniel said, ng-src might solve your problem. It stops the browser from trying to load that source of the image before angular can get going, you use it just like the 'src' attribute on a normal image.

answered Dec 6, 2015 at 22:15

Caleb O'Leary

7636 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS directive variable interpreted as text before interpolated as variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related