angularJS在進行數據綁定時默認是會以文本的形式輸出，也就是對你數據中的html標簽不進行轉義照單全收，這樣提高了安全性，防止了html標簽中的注入攻擊，但有些時候還是需要的，特別是從數據庫讀取帶格式的文本時，無法正常的顯示在頁面中。
而要對html進行轉義，則要在數據綁定的html標簽中使用ng-bind-html屬性，該屬性依賴與$sanitize，也就是需要引入angular-sanitize.js文件，並在module定義時注入該服務ngSanitize。比如:
html:
<span ng-controller="myCtr" ng-bind-html = "htmlStr"></span>
javascript:
function myCtr($scope){
$scope.htmlStr = '<p style="color:red;font-size=18px;"></p>';
};
如此則可以實現html轉義，但有個問題就是style這種標簽會被angularJS認為是不安全的所以統統自動過濾掉，而為了保留這些就需要開啟非安全模式。
但我遇到的問題不止這些，以上只是靜態的去綁定，而我自己開發的頁面是通過自定義service中的$http異步加載獲取數據，然后在success事件中為$scope綁定數據列表，而在模板中則使用<div ng-repeat="article in articles">...</div>由angularJS自動循環生成，那么問題來了，如何讓自動加載的數據轉義html標簽呢。
這兩天從directive指令、filter過濾器到$sanitize、$complie幾乎都試了一遍，不過因為一直沒有注意到關鍵的一點所以始終沒有實現。后來發現（還是偶然讀的一篇blog），ng-bind-html中也是可以綁定循環時的數據的，也就是之前我一直以為ng-bind-html中只可以綁定在后端$scope中定義的變量，也就是類似上面提到的那個例子，而實際上是可以這么綁定的：
html：
<div ng-repeat="article in articles">
<div class="panel-heading">
<h4><b>{{article.title}}</b></h4>
</div>
<div class="panel-body">
<article id="word-display" ng-bind-html="article.content | trustHtml">
</article>
</div>
</div>
javascript：
success(function (data) {
$scope.articles = data;
});
myApp.filter('trustHtml', function ($sce) {
return function (input) {
return $sce.trustAsHtml(input);
}
});
其中$sce是angularJS自帶的安全處理模塊，$sce.trustAsHtml(input)方法便是將數據內容以html的形式進行解析並返回。將此過濾器添加到ng-bind-html所綁定的數據中，便實現了在數據加載時對於html標簽的自動轉義。
來源：http://okashii.lofter.com/post/1cba87e8_29e0fab