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

AngularJS : 1.2.23
Bootstrap : 3.2.0

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

関連記事の目次

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください