Improve this Doc View Source ngHref

directive in module ng

Overview

Using AngularJS markup like Template:Hash in an href attribute will make the link go to the wrong URL if the user clicks it before AngularJS has a chance to replace the Template:Hash markup with its value. Until AngularJS 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>

Directive Info

This directive executes at priority level 99.

Usage

as attribute:
```
<A
  ng-href="template">
...
</A>
```

Arguments

Param	Type	Details
ngHref	`template`	any string which can contain `{{}}` markup.

Example

This example shows various combinations of href, ng-href and ng-click attributes in links and their different behaviors:

© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 3.0.
https://code.angularjs.org/1.8.2/docs/api/ng/directive/ngHref