Angular repeat directive syntax

Question

I am brand new to AngularJS and while doing the Codecademy course I got stuck. I was trying to repeat a directive using the following syntax.

<div class="card" ng-repeat="app in apps">
  <app-info info="{{ app }}"></app-info> 
</div>

I played around a bit and figured out I needed to remove the curly braces.

<div class="card" ng-repeat="app in apps">
  <app-info info="app"></app-info> 
</div>

But if I was not using a directive I think I would access the information like this. AngularJS documentation.

<div class="card" ng-repeat="app in apps">
  {{ app }}
</div>

Could someone explain why I do not need the curly braces to help me better understand AungularJS. Thanks!

possible duplicate of [How to get evaluated attributes inside a custom directive](http://stackoverflow.com/questions/12371159/how-to-get-evaluated-attributes-inside-a-custom-directive) — j.wittwer, Apr 15 '15 at 03:15

score 1 · Answer 1 · answered Apr 15 '15 at 03:09

1

In that particular case, using {{data}} you are evaluating the value of that variable, but when you do info="app" in other directive which contains a scope variable called info , what you are doing is binding the info scope variable of our app-info directive to the controllers (or parent directive) app scope variable.

answered Apr 15 '15 at 03:09

Matias Fernandez Martinez

1,877
13
15

I think I understand what you are saying. Can you put your answer in simpler language so it is easer to understand? – Jon Doe Apr 15 '15 at 03:12
By default attribute values of Angular directives are assumed to be [expressions](https://docs.angularjs.org/guide/expression) and are evaluated as such, but in the context of the text node of element they are assumed to be plain text and require the curly braces to inform the [parser](https://docs.angularjs.org/api/ng/service/$parse) that the text between the curly braces is an angular expression. – HJ05 Apr 15 '15 at 03:15
@HJ05 So you think that `app in apps` is such an expression? There is no default. – a better oliver Apr 15 '15 at 09:45
@zeroflagL Yes `app in apps` is an expression and this becomes more obvious when you start adding filters such as `app in apps | filter: search`. Any string that gets evaluated by the Angular runtime is an expression. Also check out @Chandermani's answer for more information. – HJ05 Apr 15 '15 at 13:21
`app in apps` is a `repeat_expression`, you can apply `filters` or alias `as alias` even you can use `ng-repeat` with an object and it's key-values `(key, value) in expression`. That means that the `expression` is going to be evaluated. Depending of your preference or approach you can evaluate the results on the controller so all logic is in the controller, resulting on a cleaner view. – Matias Fernandez Martinez Apr 15 '15 at 13:29
@HJ05 It's an expression from a semantic point of view but it's not the type of expression you are referring to. There's a completely different logic working behind which becomes more obvious when you try to use that expression outside of an `ngRepeat` directive. It won't work, because `ngRepeat` expressions are not evaluated by the Angular core. Attribute values are not simply assumed to be expressions - the directives decide what they are. A value may not even be evaluated at all, if a directive decides to use it directly. – a better oliver Apr 15 '15 at 13:59

score 1 · Accepted Answer · answered Apr 15 '15 at 04:51

Usage of interpolation symbols {{ }}depend upon the implementation of the directive. Some directives like ng-click='expression' or ng-if='expression' take an expression without the double curlies.

Whereas some other directives such as ng-src='{{expression}}' accept interpolation symbol.

It all depends upon how the directive is setup.

The basic usage of interpolation is to execute the expression and replace the content with the return value of expression (a string value).

As you learn more about the directives, you will learn how parameters are passed to directives using @,=,&. These parameters could be a simple string value (in which case an interpolation can be used), or an object, or a function.

Angular repeat directive syntax

2 Answers2