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!

Answer 1

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.