When to use double braces {{}} in angularJS

by

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)

More Related Contents:

  1. Is this a “Deferred Antipattern”?
  2. How to set focus on input field?
  3. AngularJS 1.5+ Components do not support Watchers, what is the work around?
  4. How to call a method defined in an AngularJS directive?
  5. How to use a keypress event in AngularJS?
  6. How to use the ‘replace’ feature for custom AngularJS directives?
  7. Link vs compile vs controller
  8. Angular.js directive dynamic templateURL
  9. Angularjs dynamic ng-pattern validation
  10. What is the difference between ng-app and data-ng-app?
  11. Easiest way to pass an AngularJS scope variable from directive to controller?
  12. Using angularjs filter in input element
  13. Angularjs loading screen on ajax request
  14. if a ngSrc path resolves to a 404, is there a way to fallback to a default?
  15. Directive isolate scope with ng-repeat scope in AngularJS
  16. calling method of parent controller from a directive in AngularJS
  17. Enable angular-ui tooltip on custom events
  18. Accessing attributes from an AngularJS directive
  19. How to modify scope from within a directive in AngularJs
  20. Call a method of a controller from another controller using ‘scope’ in AngularJS
  21. Can you change templateUrl on the fly?
  22. Pass form to directive
  23. What is `priority` of ng-repeat directive can you change it?
  24. How to use `replace` of directive definition?
  25. AngularJS. Convert tag value (Unix time to human-readable time)
  26. How to implement an ng-change for a custom directive
  27. How to create a directive with a dynamic template in AngularJS?
  28. Access Parent Scope in Transcluded Directive
  29. how do I get ng-include directive to work with a Content Delivery Network?
  30. AngularJS – Directives vs Controllers

Leave a Comment