AngularJSコードサンプル（sce、sanitize）

wp-admin

7年前

AngularJS : 1.6.5
Bootstrap : 3.3.7
　
※v1.2.3のサンプルはこちら。
　

（１）$sce、$sanitizeサービスを使ってHTMLデータを表示

１）AngularJSの通常のバインド
{{htmlData}}

２）$sanitizeサービスとng-bind-htmlディレクティブを使用

３）$sceのtrustAsHtmlを使用


１）AngularJSの通常のバインド<br />
<span>{{htmlData}}</span><br />
２）$sanitizeサービスとng-bind-htmlディレクティブを使用<br />
<span ng-bind-html="htmlData"></span><br />
３）$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);
});