angularjs表示式中的HTML內容,如何不轉義,直接表現為html元素
阿新 • • 發佈:2019-01-27
預設情況下,AngularJS對會對插值指令求職表示式(模型)中的任何HTML標記都進行轉義,例如以下模型:
$scope.msg = “hello,<b>world</b>!”
<p>{{msg}}</p>
渲染過程會對b標籤進行轉義,他們會議純文字顯示而非標記;
插值指令會對模型中任意html內容進行轉義,這是為了防止html注入攻擊。
如果因為某種理由,包含html標記的模型要被瀏覽器求職和渲染,那麼可以用ng-bind-html-unsafe指令來關掉預設的html標籤轉義:
<p ng-bind-html-unsafe=”msg”></p>;使用ng-bind-html-unsafe指令需要極度小心,它應被限制在你完全信任並控制的html標籤。
angularjs還有一個指令,ng-bind-html,它能夠選擇性淨化制定html標籤,同時允許其他標籤被瀏覽器所解釋,用法如下:
方法一:
1.匯入angular-sanitize.js
2.在你app中報刊需要依賴的模組,如下:
var app = angular.module('myApp', ['ngSanitize']);
3.<p ng-bind-html=”msg”></p>;
方法二:
1. 匯入angular-sanitize.js
2. 將其作為一個過濾器:
angular.module('myApp')
.filter('to_trusted', ['$sce', function($sce){
return function(text) {
return $sce.trustAsHtml(text);
};
}]);
3.<p ng-bind-html=”msg | to_trusted”></p>;