2015年12月20日

AngularJSのng-bind-htmlでHTMLを出力

AngularJSではHTMLのデータバインディングにng-bind-htmlを利用するがそのままでは利用できない。angular-sanitizeをあらかじめ読み込んでおき、依存機能にngSanitizeを含めておく必要がある。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-sanitize.min.js"></script>


<div ng-controller="MyController">
<div ng-bind-html="myData"></div>
</div>


angular.module("myApp",[ 'ngSanitize' ]).controller('MyController',["$scope",function($scope){
$scope.myData = "<b>World</b>";
}]);


もしくは$sce.trustAsHtml()を利用して害がないことを明示的に表現しなくてはいけない。

angular.module("myApp",[]).controller('MyController',["$scope",'$sce',function($scope,$sce){
$scope.myData = $sce.trustAsHtml("World");
}]);

タグ:AngularJS
posted by ねこまんま at 18:44 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック