View source Improve this doc

ngHref
directive in module ng

Description

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}}"/>

The correct way to write it:

<a ng-href="http://www.gravatar.com/avatar/{{hash}}"/>

Usage

as attribute
<A ng-href="{template}">
   ...
</A>

Directive info

  • This directive executes at priority level 99.

Parameters

ParamTypeDetails
ngHreftemplate

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:

Source





Demo