關於angularJS綁定資料時自動轉義html標籤

標籤：而在   使用   size   font   如何   return   轉義   lte   處理   

關於angularJS綁定資料時自動轉義html標籤        折磨了兩天，最後發現答案竟如此簡單，不過辛苦還是值得的，畢竟為了弄明白這一點又學習了更多代碼。        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標籤的自動轉義。

關於angularJS綁定資料時自動轉義html標籤