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里的换行是
指令控制，上传数据即为
格式，读到html里后，需要把
转换为<br>，解决的办法依旧采用filter。

app.filter('ntobr', function(){
    var filter = function(input){
        return input.replace(/
/g,"</br>").replace(/ /g,"&nbsp;");
    };
    return filter;
});
//此过滤器将textarea里的
和空格替换为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