CODEWITHSUNDEEP
angularjsangularjs-scope
Mike
Mike

Reputation: 7704

$compile is loading images before the string is even evaluated for Angular expressions

I am building a service to handle modal windows in my Angular application, so there is a bit of manual work with linking a template, scope and controller.

I'm using $compile like so, to build the template and attach to the scope, for example:

$compile('<h1>This is my window</h1><img src="{{ imageUrl }}">')($scope);

Everything is working fine, but... the browser tries to load anything such as an image before the HTML string has even been evaluated for Angular expressions. For example, in this case, the browser tries to literally load "http://myhost.com/{{ imageUrl }}", and then immediately afterwards will load the correct URL as the Angular expression is picked up.

This happens immediately upon the $compile()($scope) is called, without even attaching/inserting the returned template to the DOM.

Basically the browser seems to be parsing the HTML before Angular replaces the Angular expressions - any kind of remote content in the HTML at all will be requested by the browser. How is this so?

Upvotes: 2

Views: 686

Answers (2)

Onur
Onur

Reputation: 31

You need to use ng-src in the img tag.

Upvotes: 3

JB Nizet
JB Nizet

Reputation: 691785

Use ng-src instead of src. That's what it's for.

Upvotes: 11

Related Questions