AngularJS TIPS
URL／メールアドレスからハイパーリンクを生成するには？（linky）
URL／メールアドレスの文字列データをアンカータグによるリンクに整形できるlinkyフィルターの基本的な使い方を説明する。
linkyフィルターを利用することで、URL／メールアドレスをリンクに整形できます。以下に、さまざまな文字列を例に正しく整形されるものされないものを確認してみましょう。
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<!--3配列memosの内容を順にリンクに整形＆出力-->
<div ng-repeat="memo in memos" ng-bind-html="memo | linky"></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<!--1ngSanitizeモジュールのインポート-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-sanitize.min.js"></script>
<script>
// 2ngSanitizeモジュールへの依存を宣言
angular.module('myApp', [ 'ngSanitize' ])
.controller('MyController', ['$scope', function($scope) {
$scope.memos = [
'https://www.wings.msn.to/',
'総合FAQ（http://www.wings.msn.to/index.php/-/B-11/）',
'ftp://wings.msn.to/samples/',
'wings@example.com',
'mailto:wings@example.com',
'file:c:/data/wings/',
];
}]);
</script>
</body>
</html>
|
linkyはコアモジュール（ng）ではなく、ngSanitizeモジュールに属するフィルターです。よって、利用に当たってもangular-sanitize.min.jsをインポートした上で（1）、ngSanitizeモジュールへの依存関係を設定しておく必要があります（2）。
あとは、リンク化すべき文字列にlinkyフィルターを適用するだけです（3）。
［構文］linkyフィルター
- text： 変換対象の文字列
- target： アンカータグの
target属性（_blank｜_self｜_parent｜_topなど）
linkyフィルターはアンカータグ（＝<a>タグ）を返すので、{{...}}ではなく、ng-bind-html属性で出力しなければならない点にも注意してください（さもないと、タグ文字列がそのまま表示されてしまいます！）。
linkyフィルターが変換の対象とするのはhttp／https／ftp／mailtoです（例えば「file://～」 は変換の対象外です）。URLを含んだ文字列はURLの部分だけをリンク化します。また、メールアドレスはもともとの文字列に「mailto:」が含まれていてもいなくても、同じ結果を返します。
処理対象：フィルターコンポーネント カテゴリ：基本
API：ngSanitize カテゴリ：モジュール（Modules）
API：linky カテゴリ：ngSanitize > filter components（フィルターコンポーネント）
※以下では、本稿の前後を合わせて5回分（第11回～第15回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
11. 要素の表示／非表示を切り替えるには？（ng-show／ng-hide／ng-open）
真偽条件に応じて要素の表示／非表示を切り替えるために、ng-show／ng-hide属性を使用する方法を解説する。また、＜details＞要素の表示／非表示を切り替えるng-open属性の使い方も紹介する。
13. 【現在、表示中】≫ URL／メールアドレスからハイパーリンクを生成するには？（linky）
URL／メールアドレスの文字列データをアンカータグによるリンクに整形できるlinkyフィルターの基本的な使い方を説明する。
15. 式の真偽に応じて表示を切り替えるには？（ng-messages／ng-message）
条件式の値に応じてメッセージの表示／非表示を切り替えるために（例えばエラー時にメッセージ表示するなど）、ng-messages／ng-message属性を使用する方法を解説する。
