angularJS綁定數據中對標簽轉義的處理

一、問題

默認情況下，angularJS綁定的數據為字符串文本，不會對其中包含的html標簽進行轉義生成格式化的文本。在實際工作時碰到接口返回的數據帶有html格式時該如何處理。

二、解決辦法
1、引入angular-sanitize.js文件，並在module定義時注入服務ngSanitize。（為了能使用ng-bind-html屬性）

var myApp = angular.module('myApp', ['ngAnimate'])

    1

2、創建一個filter

myApp.filter('trustHtml', function ($sce) {
     return function (input) {
        return $sce.trustAsHtml(input);
     }
});
//$sce是angularJS自帶的安全處理模塊，$sce.trustAsHtml(input)方法便是將數據內容以html的形式進行解析並返回。

    1
    2
    3
    4
    5
    6

3、將此過濾器添加到ng-bind-html所綁定的數據中，便實現了在數據加載時對於html標簽的自動轉義。

<div ng-repeat="item in list" >
        <div ng-bind-html="item.content |trustHtml"></div>
</div>

    1
    2
    3

三、其他
本來到此，問題已經解決了。但是在實際運用中發現了另外一個小坑。某數據只在前端創建，在textarea里編輯完並保存后，
從數據庫里讀出來的格式與創建時不一致。后來發現是由於textarea里的換行是\n指令控制，上傳數據即為\n格式，讀到html里后，需要把\n轉換為<br>，解決的辦法依舊采用filter。

app.filter('ntobr', function(){
    var filter = function(input){
        return input.replace(/\n/g,"<\/br>").replace(/ /g,"&nbsp;");
    };
    return filter;
});
//此過濾器將textarea里的\n和空格替換為html可以識別的標簽

    1
    2
    3
    4
    5
    6
    7


<div ng-repeat="item in list" >
        <div ng-bind-html="item.content | ntobr |trustHtml"></div>
</div>
//在綁定數據時只需要同時加入兩個過濾器即可
轉自；http://blog.csdn.net/miniminixu/article/details/52199531