ngHref

  1. directive in module ng

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:

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

The correct way to write it:

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

Directive Info

  • This directive executes at priority level 99.

Usage

  • as attribute:
    1
    2
    3
    4
    <A
      ng-href="template">
    ...
    </A>

Arguments

Param Type Details
ngHref template

any string which can contain {{}} markup.

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

doc_AngularJS
2025-01-10 15:47:30
Comments
Leave a Comment

Please login to continue.