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); });