CODEWITHSUNDEEP
angularjs
CaptSaltyJack
CaptSaltyJack

Reputation: 16045

Don't understand the syntactical inconsistencies in Angular

A few examples:

<img ng-src="{{some.thing}}">
<button ng-class="{active: data.checkThing()}">
<div ng-repeat="thing in things"></div>

As someone learning Angular, this is highly confusing. I never know whether I need { } or {{ }} or neither. Can someone explain what these mean and when to use which?

Upvotes: 1

Views: 58

Answers (3)

Miguel
Miguel

Reputation: 20633

Single braces are used for directives accepting an object parameter, which may be more than one value. It is analogous to a JSON object.

For example:

ng-class="{active: true, highlight:true}"

Double braces are used to represent an AngularJS expression.

For example

<div>{{ item.name }}<div> (evaluates to string)

<div>{{ item.name == "Sam" }}<div> (evaluates to boolean)

No braces are used for directives accepting a single value argument.

For example, data binding:

ng-model="people.jim"

Upvotes: 1

Omri Aharon
Omri Aharon

Reputation: 17064

{{}}:

You use {{}} when you want to evaluate an expression, such as:

  1. $scope variables, e.g:

    $scope.myVar = "test";

    And in HTML:

    <div>{{myVar}}</div> will result in <div>test</div>

  2. Basic calculations, such as: {{ 1 + 1 }}, {{ myVar + " add on" }}

  3. Result of a function on the controller so it can be displayed

  4. Etc..

{}:

Condition, used directives such as ng-class/ng-style. It means the left-hand side will be in effect if the expression on the right-hand side evaluates to true. The following expression means that the button will have the class "active", if data.checkThing() evaluates to true:

<button ng-class="{active: data.checkThing()}">

Neither:

When you want to address objects, like you do in the ng-repeat, you have to iterate on objects, like you do in C#/Javascript/etc..

So because you're working with the objects themselves, you don't need to evaluate anything, and simply address them as they are variables on your scope:

<div ng-repeat="item in items">...</div>

If you are using directives for instance, and you have an isolated scope and want to bind a variable in that scope to an instance, you will use no brackets:

<div myDirective item="myItem"></div>

And in the directive you can have a reference to that item by doing:

angular.module('app').directive('my-directive', function () {
    return {
       scope: {
          item: "=" //references the object that exists in 
                    //attribute `item` on the DOM element the directive is on
       }
    }

});

Upvotes: 1

Gautam Bhalla
Gautam Bhalla

Reputation: 1210

{active:data.checkThing()} signifies object creation-----you are constructing and actually passing an object to ng-class directive in the angularjs library.

{{some.thing}} signifies 2-way data binding with the actual ng-model that reflects the changes in model data as and when it occurs.

Hope it helps.If this answers your queries kindly accept this as answer or comment back if not.

Upvotes: 0

Related Questions