32
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Organization

【AngularJS】改行を有効にするフィルタ

AngularJSで文字列を表示するには{{expression}}もしくはng-bindを利用する.
普段はこれだけで問題ないけど,出力結果に改行(\n)を含めたいときにどうするか.

例えば以下のように表示したい.

<!-- HTMLのソース -->
<p>{{iroha}}</p>
<!-- 出力結果 -->
いろはにほへと ちりぬるを
わかよたれそ  つねならむ
うゐのおくやま けふこえて
あさきゆめみし ゑひもせす

filterをつくってみる

単純に{{iroha}}としてしまうと改行は反映されないので{{iroha | newlines}}というフィルタを考えてみる.
しかし,これでも改行は反映されない

<p>{{iroha | newlines}}</p>
newlines.coffee
app = angular.module 'MyApp'

app.filter 'newlines', ($sce) ->
  (text) -> text.replace(/\n/g, '<br />') if text?

ng-bind-htmlを利用する

サニタイズ済みのhtml要素をバインドするのにng-bind-htmlを利用する.
ただし,AngularJS 1.2以降では SCE(Strict Contextual Escaping)がデフォルトで有効になっているためそのままでは表示されない.
(SECについては AngularJSのStrict Contextual Escapingって何だ? という記事がわかりやすい)

要は、セキュリティ対策として、サニタイズされていないHTML要素や、信頼されていないページの要素を表示するのを防止するための機能です。
AngularJSのStrict Contextual Escapingって何だ?

html要素をバインドするには$sce.trustAsHtmlを利用する.
改良版newlinesは以下.

<p ng-bind-html="iroha | noHTML | newlines"></p>
newlines.coffee
app = angular.module 'MyApp'

app.filter 'noHTML', ->
  (text) -> text.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/&/, '&amp;') if text?

app.filter 'newlines', ($sce) ->
  (text) -> $sce.trustAsHtml(if text? then text.replace(/\n/g, '<br />') else '')

一応,安全のためにnoHTMLというfilterを定義して元の文書をサニタイズしている.

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
32
Help us understand the problem. What are the problem?