1

Here are some example AngularJS fragments:

<image ng-href="{{mainCtrl.href}}" xlink:href="" width="383" height="108" />

<div ng-show="mainCtrl.show">

<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1" ng-attr-width="{{mainCtrl.svg.width}}" height="400">

<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1" ng-style="mainCtrl.style">

For some of the AngualrJS attribute directives I need to use double curlies to reference the model data in the controller, while for others I must not use double curlies.

When I encounter a new AngularJS directive how do I know what I should use to point it to the data on the controller? Is there some rationale as to which directives require double curlies and which require their absence?

dumbledad
  • 16,305
  • 23
  • 120
  • 273
  • see the documentation like on ngHref, there, the type is template and which can contains curly braces, so you can use braces in other documentation there's no such usage and you should follow that.. – Bhojendra Rauniyar Jan 23 '15 at 11:06
  • possible duplicate of [Difference between double and single curly brace in angular JS?](http://stackoverflow.com/questions/17878560/difference-between-double-and-single-curly-brace-in-angular-js) – Bhojendra Rauniyar Jan 23 '15 at 11:07
  • I cannot see how this is a duplicate of [Difference between double and single curly brace in angular JS?](http://stackoverflow.com/q/17878560/575530) since that is not asking about the rationale behind their use in directives, I am asking that. The answers there do not help me decide from looking at a directive which style I should choose. – dumbledad Jan 23 '15 at 11:11
  • It's exactly the duplicate question.... – Bhojendra Rauniyar Jan 23 '15 at 11:12
  • @BhojendraNepal when you say "can" do you mean "must"? – dumbledad Jan 23 '15 at 11:12
  • nope... what you want to say? – Bhojendra Rauniyar Jan 23 '15 at 11:12
  • I want to understand when I must use double curlies with an angular directive and when I must not use them. Thus the distinction between "must" and "can" is important to me – dumbledad Jan 23 '15 at 11:14
  • Please read the answer of duplicated question properly, then you'll obviously understand.... – Bhojendra Rauniyar Jan 23 '15 at 11:14

1 Answers1

3

The double curly braces tell angular to interpolate the expression, i.e. create a string. So you wouldn't use them for a directive (or attribute) that doesn't expect a literal string (like ngClick). A literal string means "use the value as is" as opposed to "interpret the value" (=expression).

Whenever you can use curly braces the Angular documentation classifies the parameter as template. By can I mean in addition to or instead of a literal string! So you could write ng-href="http://google.com" or ng-href="{{search}}" with search being 'http://google.com' or ng-href="http://{{search}}" with search being 'google.com'. The result is always the same.

Directives like ng-attr-width and ng-href are just substitutes for their "real" counterparts, width and href. They simply set the value of that attributes in the DOM. For the sake of simplicity they expect a literal string and support templates.

a better oliver
  • 26,330
  • 2
  • 58
  • 66
  • 1
    This is just what I was after, thanks. What do you mean by "By can I mean in addition to or instead of a literal string!" – dumbledad Jan 23 '15 at 14:40