【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を定義して元の文書をサニタイズしている．

参考

• AngularJSのStrict Contextual Escapingって何だ？ - Qiita
• AngularJSで改行を有効にするためのフィルタ（gist）