ngHref

http://docs.angularjs.org/api/ng.directive:ngHref

概要
使用方法
デモ

概要

Angularを使用して、href属性の中で{{hash}}のようなマークアップをすると、もし、Angularが{{hash}}の値を置換する前にユーザーがクリックしてしまうと間違ったURLへのリンクとして誘導されてしまいます。 Angularがリンクのマークアップを置換するまでリンクは壊れた状態になっており、 404エラーを返すような事が発生するはずです。

ngHrefディレクティブは、この問題を解決します。

下記は間違った書き方です。

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

下記が正しい書き方です。

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

使用方法

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

引数

引数説明

ngHref

引数	説明
ngHref	型：`式` `{{}}`に含めることが出来る文字列を指定します。

型：式

{{}}に含めることが出来る文字列を指定します。

デモ

この例で、リンク内のhref、ng-href、ng-click属性の様々な組み合わせによるそれぞれの異なる挙動を確認してください。

index.html
End to end test

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
  </head>
  <body>
    <input ng-model="value" /><br />
    <a id="link-1" href ng-click="value = 1">link 1</a> (リンク, リロード無し)<br />
    <a id="link-2" href="" ng-click="value = 2">link 2</a> (リンク, リロード無し)<br />
    <a id="link-3" ng-href="/{{'123'}}">link 3</a> (リンク, リロード!)<br />
    <a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (リンク, リロード無し)<br />
    <a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (リンクでは無い)<br />
    <a id="link-6" ng-href="{{value}}">link</a> (リンク, ページ遷移)
  </body>
</html>

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() {
  expect(element('#link-3').attr('href')).toBe("/123");

  element('#link-3').click();
  expect(browser().window().path()).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');
  expect(element('#link-6').attr('href')).toBe('6');

  element('#link-6').click();
  expect(browser().location().url()).toEqual('/6');
});

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
  </head>
  <body>
    <input ng-model="value" /><br />
    <a id="link-1" href ng-click="value = 1">link 1</a> (リンク, リロード無し)<br />
    <a id="link-2" href="" ng-click="value = 2">link 2</a> (リンク, リロード無し)<br />
    <a id="link-3" ng-href="/{{'123'}}">link 3</a> (リンク, リロード!)<br />
    <a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (リンク, リロード無し)<br />
    <a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (リンクでは無い)<br />
    <a id="link-6" ng-href="{{value}}">link</a> (リンク, ページ遷移)
  </body>
</html>

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。