34

I am just wondering why I need to add double curly braces for ng-href while some of the other directives don't need them?

<a ng-href="{{myScopeVar}}" ng-if="myScopeVar">link</a>

Notice that ng-href needs braces while ng-if doesn't.

Léo Lam
  • 3,870
  • 4
  • 34
  • 44
TheBakker
  • 2,852
  • 2
  • 28
  • 49
  • 3
    Just suppose you want to build the url dynamically, e.g.: `ng-href="#/foobar/{{barfoo}}"`. Also you might want to read the description in the [manual](http://docs.angularjs.org/api/ng.directive:ngHref) for a longer explanation. – Yoshi Jan 23 '14 at 09:27

2 Answers2

45

I am not quite sure about your question. But i think your are wondering why there are different syntax styles in angular directives. First off all, please have a look at this post: Difference between double and single curly brace in angular JS? The answer explains the difference between {{}}, {} and no braces.

For your concrete examples, as in the documentation stated: ng-href requires a template (any string which can contain {{}} markup), while ng-if requires an expression - e.g. you may not write {{}}, because angular evaluates it.

If you have a look at the angular sources you will see, that ng-href uses attr.$observe while ng-if uses the $scope.$watch function. $observe is caled on every change of the attribute value. $watch is called, when the expression results to a new value.

But why these two different ways? I think one point is easier usage and code readability. Right now you can write:

<a ng-href="http://yourdomain.com/users/{{userId}}/post/{{postId}}">title</a>

As you can see, you only write an expression for dynamically inserted userId and postId values. If ng-href would also use the $watch function we had to write (don't do this because it wil not work - it only demonstrates the difference):

<a ng-href="'http://yourdomain.com/users/'+userId+'/post'+postId">title</a>
Community
  • 1
  • 1
michael
  • 16,221
  • 7
  • 55
  • 60
-1

Even if Iuse ng-href data-ng-href it throws error for validation. I used <link rel="stylesheet" data-ng-href="{{datas}}" href="/"> in order to pass validating error.

Hope it will helps someone

Shaxrillo
  • 769
  • 1
  • 7
  • 24