1. 程式人生 > >angularJS綁定數據時自動轉義html標簽

angularJS綁定數據時自動轉義html標簽

異步 pre ces rust 保留 加載 獲取 防止 mls

關於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標簽