linky

http://docs.angularjs.org/api/ngSanitize.filter:linky

概要
使用方法
デモ

概要

テキスト入力内からリンクを見つけ、HTMLリンクに変換します。 http/https/ftp/mailtoと、プレーンのemailアドレスリンクをサポートします。

ngSanitizeモジュールのインストールが必要です。

使用方法

HTMLテンプレートでのバインディング

<span ng-bind-html="linky_expression | linky"></span>

JavaScript内での使用

$filter('linky')(text, target)

引数	説明
text	型：`string` 入力テキストを指定します。
target	型：`string` リンクを開く先のwindos(_blank\|_self\|_parent\|_top)または、フレーム名を指定します。
戻り値	説明
	型：`string` HTMLリンクされたテキストが返ります。

デモ

<!doctype html>
<html ng-app="ngSanitize">
  <head>
    <script src="http://code.angularjs.org/1.2.1/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="Ctrl">
    Snippet: <textarea ng-model="snippet" cols="60" rows="3"></textarea>
    <table>
      <tr>
        <td>Filter</td>
        <td>Source</td>
        <td>Rendered</td>
      </tr>
      <tr id="linky-filter">
        <td>linky filter</td>
        <td>
          <pre>&lt;div ng-bind-html="snippet | linky"&gt;<br>&lt;/div&gt;</pre>
        </td>
        <td>
          <div ng-bind-html="snippet | linky"></div>
        </td>
      </tr>
      <tr id="linky-target">
       <td>linky target</td>
       <td>
         <pre>&lt;div ng-bind-html="snippetWithTarget | linky:'_blank'"&gt;<br>&lt;/div&gt;</pre>
       </td>
       <td>
         <div ng-bind-html="snippetWithTarget | linky:'_blank'"></div>
       </td>
      </tr>
      <tr id="escaped-html">
        <td>no filter</td>
        <td><pre>&lt;div ng-bind="snippet"&gt;<br>&lt;/div&gt;</pre></td>
        <td><div ng-bind="snippet"></div></td>
      </tr>
    </table>
  </body>
</html>

function Ctrl($scope) {
  $scope.snippet =
    'Pretty text with some links:
'+
    'http://angularjs.org/,
'+
    'mailto:[email protected],
'+
    '[email protected],
'+
    'and one more: ftp://127.0.0.1/.';
  $scope.snippetWithTarget = 'http://angularjs.org/';
}

it('should linkify the snippet with urls', function() {
  expect(using('#linky-filter').binding('snippet | linky')).
    toBe('Pretty text with some links:&#10;' +
         '<a href="http://angularjs.org/">http://angularjs.org/</a>,&#10;' +
         '<a href="mailto:[email protected]">[email protected]</a>,&#10;' +
         '<a href="mailto:[email protected]">[email protected]</a>,&#10;' +
         'and one more: <a href="ftp://127.0.0.1/">ftp://127.0.0.1/</a>.');
});

it ('should not linkify snippet without the linky filter', function() {
  expect(using('#escaped-html').binding('snippet')).
    toBe("Pretty text with some links:
" +
         "http://angularjs.org/,
" +
         "mailto:[email protected],
" +
         "[email protected],
" +
         "and one more: ftp://127.0.0.1/.");
});

it('should update', function() {
  input('snippet').enter('new http://link.');
  expect(using('#linky-filter').binding('snippet | linky')).
    toBe('new <a href="http://link">http://link</a>.');
  expect(using('#escaped-html').binding('snippet')).toBe('new http://link.');
});

it('should work with the target property', function() {
 expect(using('#linky-target').binding("snippetWithTarget | linky:'_blank'")).
   toBe('<a target="_blank" href="http://angularjs.org/">http://angularjs.org/</a>');
});

<!doctype html>
<html ng-app="ngSanitize">
  <head>
    <script src="http://code.angularjs.org/1.2.1/angular.min.js"></script>
<script>function Ctrl($scope) {
  $scope.snippet =
    'Pretty text with some links:
'+
    'http://angularjs.org/,
'+
    'mailto:[email protected],
'+
    '[email protected],
'+
    'and one more: ftp://127.0.0.1/.';
  $scope.snippetWithTarget = 'http://angularjs.org/';
}
</script>
  </head>
  <body>
    <div ng-controller="Ctrl">
    Snippet: <textarea ng-model="snippet" cols="60" rows="3"></textarea>
    <table>
      <tr>
        <td>Filter</td>
        <td>Source</td>
        <td>Rendered</td>
      </tr>
      <tr id="linky-filter">
        <td>linky filter</td>
        <td>
          <pre>&lt;div ng-bind-html="snippet | linky"&gt;<br>&lt;/div&gt;</pre>
        </td>
        <td>
          <div ng-bind-html="snippet | linky"></div>
        </td>
      </tr>
      <tr id="linky-target">
       <td>linky target</td>
       <td>
         <pre>&lt;div ng-bind-html="snippetWithTarget | linky:'_blank'"&gt;<br>&lt;/div&gt;</pre>
       </td>
       <td>
         <div ng-bind-html="snippetWithTarget | linky:'_blank'"></div>
       </td>
      </tr>
      <tr id="escaped-html">
        <td>no filter</td>
        <td><pre>&lt;div ng-bind="snippet"&gt;<br>&lt;/div&gt;</pre></td>
        <td><div ng-bind="snippet"></div></td>
      </tr>
    </table>
  </body>
</html>

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

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