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

AngularJS TIPS

URL/メールアドレスからハイパーリンクを生成するには?(linky)

2015年6月15日

URL/メールアドレスの文字列データをアンカータグによるリンクに整形できるlinkyフィルターの基本的な使い方を説明する。

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

 linkyフィルターを利用することで、URL/メールアドレスをリンクに整形できます。以下に、さまざまな文字列を例に正しく整形されるものされないものを確認してみましょう。

HTML
<!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>
配列memosの内容を順にリンクとして表示するコード(linky.html)
URL/メールアドレスをリンクに整形
URL/メールアドレスをリンクに整形

 linkyはコアモジュール(ng)ではなく、ngSanitizeモジュールに属するフィルターです。よって、利用に当たってもangular-sanitize.min.jsをインポートした上で(1)、ngSanitizeモジュールへの依存関係を設定しておく必要があります(2)。

 あとは、リンク化すべき文字列にlinkyフィルターを適用するだけです(3)。

[構文]linkyフィルター

text | linky [:target]
  • 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]を参照してください。

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

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

AngularJS TIPS
12. 入力された区切り文字を配列に変換するには?(ng-list)

テキストボックスへの入力値を特定の区切り文字で分割して文字列の配列に変換するために、ng-list属性を使用する方法を解説する。

AngularJS TIPS
13. 【現在、表示中】≫ URL/メールアドレスからハイパーリンクを生成するには?(linky)

URL/メールアドレスの文字列データをアンカータグによるリンクに整形できるlinkyフィルターの基本的な使い方を説明する。

AngularJS TIPS
14. 入力フォームに検証機能を実装するには?(form/input)

標準的な<input>要素を拡張して入力フォームに検証機能を付ける方法を説明する。

AngularJS TIPS
15. 式の真偽に応じて表示を切り替えるには?(ng-messages/ng-message)

条件式の値に応じてメッセージの表示/非表示を切り替えるために(例えばエラー時にメッセージ表示するなど)、ng-messages/ng-message属性を使用する方法を解説する。

サイトからのお知らせ

Twitterでつぶやこう!