AngularJS : 1.6.5
Bootstrap : 3.3.7
※v1.2.3のサンプルはこちら。
(1)$sce、$sanitizeサービスを使ってHTMLデータを表示
1)AngularJSの通常のバインド
{{htmlData}}
2)$sanitizeサービスとng-bind-htmlディレクティブを使用
3)$sceのtrustAsHtmlを使用
1)AngularJSの通常のバインド<br />
<span>{{htmlData}}</span><br />
2)$sanitizeサービスとng-bind-htmlディレクティブを使用<br />
<span ng-bind-html="htmlData"></span><br />
3)$sceのtrustAsHtmlを使用<br />
<span ng-bind-html="trustedData"></span><br />
var demoApp = angular.module('demoApp', ['ngSanitize']);
demoApp.controller("sceCtrl", function ($scope,$sce) {
$scope.htmlData = "<b style='color: red;' onmouseover=alert('Alert!')>mouseover</b>";
$scope.trustedData = $sce.trustAsHtml($scope.htmlData);
});