When to use double braces {{}} in angularJS

Question

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?

Solution 1

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)

Solution 2

Check the documentation. Avoid using 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:

• ng-selected, see AngularJS ng-selected Directive API Reference
• ng-disabled, see AngularJS ng-disabled Directive API Reference
• ng-required
• ng-if
• ng-show
• ng-hide
• ng-open
• ng-value
• ng-repeat
• ng-options