difference between src and ng-src....

[sach...@gmail.com]

I am not very clear about the difference between the two. Both these work at all places in my application. Is there any scenario in which src will not work properly?

[Pawel Kozlowski]

Hi!

'src' will start fetching a resource as soon as a browsers parses the
DOM. At this point AngularJS might not have kicked-in and expressions
are not evaluated yet. So, if you've got say the img tag like this:

<img src="/path/{{name}}.png"> a browser might actually issue a HTTP
request for the '/path/{{name}}.png' resource. This request will
obviously fail with 404...

ngSrc assures that a HTTP request is issued only when AngularJS
compiled the DOM and evaluated an expression. From the ngSrc doc
(http://docs.angularjs.org/api/ng.directive:ngSrc):

Using Angular markup like {{hash}} in a src attribute doesn't work
right: The browser will fetch from the URL with the literal text
{{hash}} until Angular replaces the expression inside {{hash}}. The
ngSrc directive solves this problem.

In short: you should be always using ngSrc instead of src if you use
AngularJS expression in resource paths.

Cheers,
Pawel

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en.
>
>




--
Question? Send a fiddle (http://jsfiddle.net/pkozlowski_opensource/Q2NpJ/)
or a plunk (http://plnkr.co/)
Need help with jsFiddle? Check this:
http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/

Looking for UI widget library for AngularJS? Here you go:
http://angular-ui.github.com/

[Richard Bagnall]

HI Pawel,

Is there a trick to allow an image using ngSrc validate in an HTML validator? I know I can use e.g. data-ng-src, but the HTML validator flags missing attribute src :-(

Thanks,

Richard

[Witold Szczerba]

Maybe this will go through?
<img src="" data-ng-src="...">

Regards,
Witold Szczerba
---
Sent from my mobile phone.

To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.

Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.