Why do we use double braces for ng-src in AugularJS?

Question

I'm confused about AngularJS expressions.

From w3schools.com, I learned that

AngularJS expressions can be written inside double braces: {{ expression }}.
AngularJS expressions can also be written inside a directive: ng-bind="expression".

But why do we use ng-src={{...}} instead of ng-src="..."?

Is the ng-src a special case when dealing with AngularJS expressions?

Refer to the official documentation : https://docs.angularjs.org/api/ng/directive/ngSrc — R3tep, Apr 08 '16 at 08:03

score 6 · Accepted Answer · answered Apr 08 '16 at 08:20

6

Yes, it is a special case for ng-src, as it is waiting for a template parameter, which is a string with any kind of interpolation inside ({{}}), as stated in the docs.

<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />

This depends on how the directive is specified by itself.

answered Apr 08 '16 at 08:20

Kutyel

8,575
3
30
61

It does make sense as you said! – Galaxy Apr 08 '16 at 08:30

score 0 · Answer 2 · edited Apr 08 '16 at 08:29

0

You can use both. When you are binding certain dynamic values at that time use like this.

ng-src="{{myVar}}"

When you are binding static values at that time use like this.

<img ng-src="string"></img>

Hope this will make you clear.

edited Apr 08 '16 at 08:29

C.Champagne

5,381
2
23
35

answered Apr 08 '16 at 08:01

Dilip Oganiya

1,504
12
20

For the directives other than ng-src, for example ng-repeat, ng-model, why don't we use double braces for dynamic values as you said? – Galaxy Apr 08 '16 at 08:15

score 0 · Answer 3 · edited May 23 '17 at 10:30

0

This has sort of been asked already, referring to this question might be helpful

Difference between double and single curly brace in angular JS?

edited May 23 '17 at 10:30

Community

1
1

answered Apr 08 '16 at 08:02

nardeas

633
6
14

I read this before, but still can not understand why we use double braces with ng-src. Is this the only directive that we should use double braces with? – Galaxy Apr 08 '16 at 08:10

Why do we use double braces for ng-src in AugularJS?

3 Answers3