AngularJS TIPS
ハイパーリンクを動的に生成するには？（ng-href）
スコープオブジェクト経由で動的に生成したハイパーリンクのURL設定が適切に処理されるように、ng-href属性を使用する方法を解説する。
以下は、ハイパーリンク（＝アンカータグのhref属性）をスコープオブジェクト経由で動的に生成する例です。
|
<!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>
|
一見して、特に問題なくハイパーリンクが設定されているように見えます。しかし、AngularJSがhref属性を処理する前にエンドユーザーがリンクをクリックしてしまうとどうでしょう。href属性が設定されていなくても、リンクは有効ですので、おそらくは意図しないページにジャンプすることになります。
例えば以下は、「AngularJSがhref属性を処理する前」をあからさまに体験するために、スコープオブジェクトのurlプロパティを設定する前に5000ミリ秒の遅延を設定したコードです。$timeoutはAngularJSで提供されているサービスの一種で、window.setTimeoutメソッドのラッパーです。
|
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属性と同じく、以下のように{{...}}でパスを設定するだけです。
|
<a ng-href="{{url}}">サポートサイトへ</a>
|
AngularJSがng-href属性を処理する前は、ハイパーリンクも単なる文字列として表示されますので、意図せずして処理前のリンクがクリックされてしまうことはありません。原則として、動的に設定するリンク先は、href属性ではなく、ng-href属性で設定するようにしてください。
API：ngHref（ng-href） カテゴリ：ng（コアモジュール） > directive（ディレクティブ）
※以下では、本稿の前後を合わせて5回分（第7回～第11回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
7. ビューにHTML文書をバインドするには？（ng-bind-html）
文字列をデータバインドした際に、標準で実施されるサニタイズ処理について紹介。また、サニタイズせずにHTMLのままのビューに反映させる方法も説明する。
8. イベントリスナーを登録するには？（ng-clickなど）
AngularJSで、ディレクティブを使ってイベントリスナーを設定する方法を解説。また、イベントリスナーにイベントオブジェクトを渡して参照する方法も説明する。
9. 【現在、表示中】≫ ハイパーリンクを動的に生成するには？（ng-href）
スコープオブジェクト経由で動的に生成したハイパーリンクのURL設定が適切に処理されるように、ng-href属性を使用する方法を解説する。
11. 要素の表示／非表示を切り替えるには？（ng-show／ng-hide／ng-open）
真偽条件に応じて要素の表示／非表示を切り替えるために、ng-show／ng-hide属性を使用する方法を解説する。また、＜details＞要素の表示／非表示を切り替えるng-open属性の使い方も紹介する。
