AngularJSコードサンプル(sce、sanitize)

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

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です