AngularJS で HTML をエスケープさせずに出力するには


AngularJS での出力手段

AngularJS で単に文字列を出力するには、{{expression}}またはng-bindを HTML で利用する。

1
2
<span>{{ninja.name}}</span>
<span ng-bind="ninja.name"></span>

{{expression}} が一瞬表示されてチラつく場合の対処方法

{{expression}}をエントリーポイントの index.html で利用すると、AngularJS が処理するまで{{expression}}がそのままページに表示され、値が切り替わるときにチラついてしまう。

この問題に対しては、ng-bindを利用するか、ng-cloakを以下のように利用することで解決できる。

1
<span ng-cloak>{{ninja.name}}</span>

なお、ng-viewng-include で挿入される断片(partial)の HTML では、このチラつく現象は発生しないため、ng-cloak の記述は不要である。

HTML をエスケープさせずに出力するには

HTML をエスケープさせずに出力するには、ng-bind-htmlを利用する。

1
<span ng-bind-html="ninja.htmlContent"></span>

このng-bind-htmlは、別のモジュール(ngSanitize)に分かれているため、angular-sanitize.min.js を index.html で参照し、依存するモジュールとして記述する必要がある。

index.html
1
<script src="assets/lib/angular-1.1.5/angular-sanitize.min.js"></script>
app.js
1
var app = angular.module('app', ['ngSanitize']);

サニタイズせずに出力するには

出力する内容が安全であるとわかっている場合には、$sce.trustAsHtml を利用してまったくサニタイズせずに出力することができる。

また、バージョン 1.1 までであれば、ngSanitize モジュールを利用することなくng-bind-html-unsafeを利用できる。