Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
AngularJS TIPS

AngularJS TIPS

ハイパーリンクを動的に生成するには?(ng-href)

2015年4月30日

スコープオブジェクト経由で動的に生成したハイパーリンクのURL設定が適切に処理されるように、ng-href属性を使用する方法を解説する。

  • このエントリーをはてなブックマークに追加

 以下は、ハイパーリンク(=アンカータグのhref属性)をスコープオブジェクト経由で動的に生成する例です。

HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body>
<div ng-controller="myController">
  <a href="{{url}}">サポートサイトへ</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script>
angular.module('myApp', [])
  .controller('myController', ['$scope', function($scope) {
    $scope.url = 'http://www.wings.msn.to/';
  }]);
</script>
</body>
</html>
ハイパーリンクのURLを動的に設定するコード(link.html)
リンクを動的に生成
リンクを動的に生成

 一見して、特に問題なくハイパーリンクが設定されているように見えます。しかし、AngularJSがhref属性を処理する前にエンドユーザーがリンクをクリックしてしまうとどうでしょう。href属性が設定されていなくても、リンクは有効ですので、おそらくは意図しないページにジャンプすることになります。

 例えば以下は、「AngularJSがhref属性を処理する前」をあからさまに体験するために、スコープオブジェクトのurlプロパティを設定する前に5000ミリ秒の遅延を設定したコードです。$timeoutはAngularJSで提供されているサービスの一種で、window.setTimeoutメソッドのラッパーです。

JavaScript
angular.module('myApp', [])
  .controller('myController', ['$scope', '$timeout',  function($scope, $timeout) {
    // 5秒後にリンクを設定
    $timeout(function() {
      $scope.url = 'http://www.wings.msn.to/';
    }, 5000);
  }]);
時間差でリンクを設定する例
意図しないリンク先が表示されている
意図しないリンク先が表示されている

 確かに、リンク先が意図しないパスになっていることが確認できます。これは当然、望ましい状態ではありませんので、この場合、リンクそのものを無効にしておくべきです。

 これを行うのが、ng-href属性です。ng-href属性では、href属性と同じく、以下のように{{...}}でパスを設定するだけです。

HTML
<a ng-href="{{url}}">サポートサイトへ</a>
ng-href属性でリンク先を設定するコード
処理前はリンクそのものを無効化
処理前はリンクそのものを無効化

 AngularJSがng-href属性を処理する前は、ハイパーリンクも単なる文字列として表示されますので、意図せずして処理前のリンクがクリックされてしまうことはありません。原則として、動的に設定するリンク先は、href属性ではなく、ng-href属性で設定するようにしてください。

処理対象:ハイパーリンク カテゴリ:基本
API:ngHref(ng-href) カテゴリ:ng(コアモジュール) > directive(ディレクティブ)

※以下では、本稿の前後を合わせて5回分(第7回~第11回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

AngularJS TIPS
7. ビューにHTML文書をバインドするには?(ng-bind-html)

文字列をデータバインドした際に、標準で実施されるサニタイズ処理について紹介。また、サニタイズせずにHTMLのままのビューに反映させる方法も説明する。

AngularJS TIPS
8. イベントリスナーを登録するには?(ng-clickなど)

AngularJSで、ディレクティブを使ってイベントリスナーを設定する方法を解説。また、イベントリスナーにイベントオブジェクトを渡して参照する方法も説明する。

AngularJS TIPS
9. 【現在、表示中】≫ ハイパーリンクを動的に生成するには?(ng-href)

スコープオブジェクト経由で動的に生成したハイパーリンクのURL設定が適切に処理されるように、ng-href属性を使用する方法を解説する。

AngularJS TIPS
10. 条件式の真偽に応じて表示を切り替えるには?(ng-if)

真偽条件に応じて要素の表示/非表示を切り替えるために、ng-if属性を使用する方法を解説する。

AngularJS TIPS
11. 要素の表示/非表示を切り替えるには?(ng-show/ng-hide/ng-open)

真偽条件に応じて要素の表示/非表示を切り替えるために、ng-show/ng-hide属性を使用する方法を解説する。また、<details>要素の表示/非表示を切り替えるng-open属性の使い方も紹介する。

サイトからのお知らせ

Twitterでつぶやこう!