Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 728
Tom Maher Avatar asked Feb 11 '16 12:02

Tom Maher


People also ask

Why we use double curly braces in angular?

Displaying values with interpolationlink By default, interpolation uses the double curly braces {{ and }} as delimiters. Angular replaces currentCustomer with the string value of the corresponding component property. In this case, the value is Maria .

What is double brackets in angular?

Interpolation in Angular In simple terms, when you send data from an Angular component to the template using the mustache syntax or what you would call double curly brackets (these: “{{ … }}”) it is called interpolation. You can use it with variables, objects and even functions.

Which braces is used for data binding?

Data Binding – Using Curly Braces in MXML The following example demonstrates how to use curly braces to specify data binding of a source to destination.

How do you use double curly braces in HTML?

Declare a template in the HTML file. Handlebars expressions are put into double curly braces {{expr}} for HTML-escaped content; otherwise, use triple curly brackets {{{expr}}} to avoid HTML-escaping.


1 Answers

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)

like image 54
CodeTower Avatar answered Sep 28 '22 12:09

CodeTower