# angular.directive.ng:href

Work in Progress This page is currently being revised. It might be incomplete or contain inaccuracies.

## Description

Using `<angular/>` markup like {{hash}} in an href attribute makes the page open to a wrong URL, ff the user clicks that link before angular has a chance to replace the {{hash}} with actual URL, the link will be broken and will most likely return a 404 error. The `ng:href` solves this problem by placing the `href` in the `ng:` namespace.

The buggy 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

    <ANY ng:href="template">
       ...
    </ANY>

### Parameters

- `template – {template} –`

  any string which can contain `{{}}` markup.

## Example

This example uses `link` variable inside `href` attribute:

        <input name="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'}}" ng:click="value = 3">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 hash)

        it('should execute ng:click but not reload when href without value', function() {
          element('#link-1').click();
          expect(input('value').val()).toEqual('1');
          expect(element('#link-1').attr('href')).toBe("");
        });

        it('should execute ng:click but not reload when href empty string', function() {
          element('#link-2').click();
          expect(input('value').val()).toEqual('2');
          expect(element('#link-2').attr('href')).toBe("");
        });

        it('should execute ng:click and change url when ng:href specified', function() {
          element('#link-3').click();
          expect(input('value').val()).toEqual('3');
          expect(element('#link-3').attr('href')).toBe("#123");
          expect(browser().location().hash()).toEqual('123');
        });

        it('should execute ng:click but not reload when href empty string and name specified', function() {
          element('#link-4').click();
          expect(input('value').val()).toEqual('4');
          expect(element('#link-4').attr('href')).toBe("");
        });

        it('should execute ng:click but not reload when no href but name specified', function() {
          element('#link-5').click();
          expect(input('value').val()).toEqual('5');
          expect(element('#link-5').attr('href')).toBe(undefined);
        });

        it('should only change url when only ng:href', function() {
          input('value').enter('6');
          element('#link-6').click();
          expect(browser().location().hash()).toEqual('/6');
          expect(element('#link-6').attr('href')).toBe("#/6");
        });