CODEWITHSUNDEEP
angularjsangularjs-directive
Tom Maher
Tom Maher

Reputation: 2054

When to use double braces {{}} in angularJS

Taken from the Angular documentation:

Angular Expressions
Angular expressions are JavaScript-like code snippets that are mainly placed in interpolation bindings such as 

<span title="{{ attrBinding }}">{{ textBinding }}</span>

but also used directly in directive attributes such as ng-click="functionExpression()".

For example, these are valid expressions in Angular:

1+2 a+b user.name items[index]

However I'm a little confused as to when to use the double braces syntax {{}} and when not to. The documentation seems to suggest that you don't need them when using expressions within the directive attributes (see the ng-click example above).

Although the following code which works offers anecdotal evidence to the contrary:

<ul id="Menu">
        <li ng-repeat="appModule in applicationModules"
            id="{{appModule.Name}}"
            ng-class="{ 'selected' :  selectedAppModule == '{{appModule.Name}}' }" 
            ng-click="menuClicked(appModule.Name)">
            <a href="#Content/{{appModule.Name}}">{{appModule.Display}}</a>
        </li>
    </ul>

Note how in the ng-class directive the double braces are used and inside the ng-click directive they are not.

How do you know when to use them and when not to?

Upvotes: 19

Views: 16977

Answers (2)

georgeawg
georgeawg

Reputation: 48948

Check the documentation. Avoid using interpolation {{ }} when the documentation says that the directive takes an expression, . In the case of ng-src, the documentaion explicitly says use {{ }}. If the attribute is not an AngularJS directive, use interpolation.

Erroneous

ng-class="{ 'selected' :  selectedAppModule == '{{appModule.Name}}' }"

The above example is an example of mixing interpolation and Angular epressions.

Instead use:

ng-class="{ 'selected' :  selectedAppModule == appModule.Name }"

From the Docs:

Why mixing interpolation and expressions is bad practice:

  • It increases the complexity of the markup
  • There is no guarantee that it works for every directive, because interpolation itself is a directive. If another directive accesses attribute data before interpolation has run, it will get the raw interpolation markup and not data.
  • It impacts performance, as interpolation adds another watcher to the scope.
  • Since this is not recommended usage, we do not test for this, and changes to AngularJS core may break your code.

— AngularJS Developer Guide - mixing interpolation and expressions

Update

Don't use interpolation with:

Upvotes: 3

CodeTower
CodeTower

Reputation: 6333

It depends on the directive attribute in question and the type of binding it uses. Further more it depends on what you intend in the given situation.

From your example: 

ng-repeat="appModule in applicationModules"

No need for the braces as this expression is evaluated by angular inside the ng-repeat directive. 

id="{{appModule.Name}}"

Here we need braces as we want the id to be equal to the value of the expression. 

ng-class="{ 'selected' :  selectedAppModule == '{{appModule.Name}}' }"

I'm pretty sure this can be written as:

ng-class="{ 'selected' :  selectedAppModule == appModule.Name }"

And you get the same behaviour. 

ng-click="menuClicked(appModule.Name)"

In this example we need the ng-click to be bound to the method named menuClicked.

Generally we use {{}} when we want to evaluate the expression and when dealing with attributes we don't always need to use {{}} as they are in many cases evaluated behind the scenes.

Simple Tip A rule of thumb for when {{}} is needed is by thinking of it as a wrapper for a .ToString()-method. Does converting the expression to a string make sense, then so does using {{}}. (Any counter examples are very welcome)

Upvotes: 17

Related Questions