Angular js的強大之處之一就是他的資料雙向繫結這個功能，我們會常常用到的兩個東西就是ng-bind和針對form的ng-model。但在我們的專案當中會遇到這樣的情況，後臺返回的資料中帶有各種各樣的html標籤。如：

$scope.text = “hello,<br><b> 這是一個例子</b>”

我們用ng-bind-html這樣的指令來繫結，結果卻不是我們想要的。
是這樣的：
hello,這是一個例子（我們給文字設定的b標籤樣式丟失了）

除錯了半天，最後鎖定問題並解決問題。，不過辛苦還是值得的，畢竟為了弄明白這一點又學習了更多程式碼。

原因是這樣的：

angularJS在進行資料繫結時預設是會以文字的形式輸出，也就是對你資料中的html標籤不進行轉義照單全收，這樣提高了安全性，防止了html標籤中的注入攻擊。但是如果我們的應用場景，是類似於文章詳情頁，從資料庫讀取帶格式的文字時，無法正常的顯示在頁面中。如下：

$scope.htmlStr = '<p style="color:red;font-size=18px;"></p>';

這個時候我們必須要使用$sce這個服務來解決我們的問題。所謂sce即“Strict Contextual Escaping”的縮寫。翻譯成中文就是“嚴格的上下文模式”也可以理解為安全繫結吧。該方法將值轉換為特權所接受並能安全地使用“ng-bind-html”來繫結。
來看看如何使用吧：
首先你需要在頁面中引入angular-sanitize.js

var app = angular.module('demo',['ngSanitize']);

然後自定義一個過濾器供頁面呼叫：

//註冊一個過濾器，掛載到任意一個angular.module下，如果自定義過濾器較多，可以提取出來一個公用的過濾器module
    .filter('to_trusted', ['$sce', function ($sce) {
        return function (text) {
            return $sce.trustAsHtml(text);
        };
    }]);
//然後在頁面中這樣使用
 

<p ng-bind-html="article.text | to_trusted"></p>

$sce是angularJS自帶的安全處理模組，$sce.trustAsHtml(input)方法便是將資料內容以html的形式進行解析並返回。將此過濾器新增到ng-bind-html所繫結的資料中，便實現了在資料載入時對於html標籤的自動轉義。