1. 程式人生 > >angularjs表示式中的HTML內容,如何不轉義,直接表現為html元素

angularjs表示式中的HTML內容,如何不轉義,直接表現為html元素

預設情況下,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>;