What is the diff between using {{...}} and without {{...}} and angular directives?

Question

Actually I'm confused between when to use {{ }} when using angular directives and when to not to use {{ }}

For example:

<div data-ng-init="isHidden=false">
    <div data-ng-show="isHidden">
        ...
    </div>
</div>

and

<div data-ng-init="isHidden=false">
    <div data-ng-show="{{isHidden}}">
        ...
    </div>
</div>

I'm confused between these syntax ? What are the differences between those? And when to use what? Thanks in advance :)

Possible duplicate of [Difference between double and single curly brace in angular JS?](http://stackoverflow.com/questions/17878560/difference-between-double-and-single-curly-brace-in-angular-js) — Shashank Agrawal, Aug 11 '16 at 05:05

score 1 · Answer 1 · edited May 23 '17 at 10:34

1

It's all explained here: Difference between double and single curly brace in angular JS?

For quick answer:

{{}} are Angular expressions and come quite handy when you wish to write stuff to HTML

Don't use these at a place that is already an expression!

For instance, the directive ngClick treats anything written in between the quotes as an expression

edited May 23 '17 at 10:34

Community

1
1

answered Aug 11 '16 at 05:07

Shashank Agrawal

25,161
11
89
121

so ng-show expect a expression ? and if used {{ }} inside expression it will automatically trim {{ }} ? without any error ? because i got not error in both ways – Vikram Chhipa Aug 11 '16 at 05:12

score 1 · Answer 2 · answered Aug 11 '16 at 05:08

1

There is no difference except the "look" u need to use the {{value}} syntax in case you want to write data anywhere in your html body

<div>{{value}}</div>

answered Aug 11 '16 at 05:08

Simon Müller

451
1
4
17

score 0 · Answer 3 · answered Aug 11 '16 at 05:17

<div data-ng-init="isHidden=false"> <div data-ng-show="isHidden"> ... </div> </div> In This Situation data-ng-show = false , Takes From data-ng-init As Statically,if You Have Given true Then It Returns True .

But Here

<div data-ng-init="isHidden=false">
<div data-ng-show="{{isHidden}}">
    ...
</div>

{{}} Called As Expressions In Angular One Of The Most Important Concept
It Directly Evaluate If isHidden = true Or False Based On Any Condition Written In Your App.js File . Example:

<div data-ng-init="isHidden=YourVariable">
<div data-ng-show="{{isHidden}}">
    ...
</div>

if(YourVariable == true){
   Do Somthing  
}
else{
 Do Something
}

score 0 · Answer 4 · answered Aug 11 '16 at 05:29

If you are asking when to use {{}} while assigning value to a attribute and when not.

It depends on the binding types of directive. '@' or '='

So here, you have to use: data-ng-show="{{isHidden}}" if the binding type of directive scope data-ng-show is '@', that mean the data-ng-show will be expecting a string value. So in this case if you keep data-ng-show="isHidden" it will take data-ng-show's value as 'isHidden', but data-ng-show="{{isHidden}}" will take the value of the $scope.isHidden and assign to data-ng-show.

Now if the binding type of directive scope data-ng-show is '=', that means the data-ng-show will be expecting a value from a scope. So data-ng-show="isHidden" itself will take the value of he $scope.isHidden and assign to data-ng-show.

Note: all the default HTML attributes expect a string so you have to use {{}} for default HTML attributes.

score -1 · Answer 5 · edited Jun 20 '20 at 09:12

There is no as such major difference unless one uses them in the DOM for the value.

When one uses the following:

<div data-ng-show="isHidden">

then, expression is evaluated and on the basis of it respective value, the ng-show either hides or displays the div. But the value of the isHidden cannot be seen, when one inspects the HTML using the browser developer tool.

When one uses the following:

<div data-ng-show="{{isHidden}}">

In this case, the value of the isHidden can be seen from the developer tools, and the rest of the expression does evaluates the same as that of (1).

What is the diff between using {{...}} and without {{...}} and angular directives?

5 Answers5