Using Angular markup like {{hash}}
in an href attribute will
make the link go to the wrong URL if the user clicks it before
Angular has a chance to replace the {{hash}}
markup with its
value. Until Angular replaces the markup the link will be broken
and will most likely return a 404 error. The ngHref
directive
solves this problem.
The wrong way to write it:
<a href="http://www.gravatar.com/avatar/{{hash}}">link1</a>
The correct way to write it:
<a ng-href="http://www.gravatar.com/avatar/{{hash}}">link1</a>
<A
ng-href="template">
...
</A>
Param | Type | Details |
---|---|---|
ngHref | template |
any string which can contain |
This example shows various combinations of href
, ng-href
and ng-click
attributes
in links and their different behaviors:
<input ng-model="value" /><br />
<a id="link-1" href ng-click="value = 1">link 1</a> (link, don't reload)<br />
<a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don't reload)<br />
<a id="link-3" ng-href="/{{'123'}}">link 3</a> (link, reload!)<br />
<a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (link, don't reload)<br />
<a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br />
<a id="link-6" ng-href="{{value}}">link</a> (link, change location)