angularJS 显示带html的文本

一般我们写代码的时候需要渲染带html结构的字符串。在使用anjularJs时使用ng-bind-html就可以实现渲染。

但是angularjs绑定的数据都会默认以文本的形式输出，并不会去识别html标签，这样做主要是为了防止html标签中的注入攻击，提高了安全性。那么该如何解决呢。

通常使用这种方法：

静态页面：

 <tr ng-repeat="show in shows">
     <td>
         <div ng-bind-html="show | trusted"></div>
     </td>
 </tr>

过滤器配置

app.filter("trusted", ["$sce", function ($sce) {
		return function (html) {
            if (typeof html== 'string')   //判断类型为字符串
                return $sce.trustAsHtml(html);  
            return html;
        }
    }])

或者

app.filter("trusted", ['$sce', function ($sce) {
　　  return function (text) {
    　　  return $sce.trustAsHtml(text);
　　};
}]);

为什么要这样做呢，这是因为如果在angularjs中绑定的数据有html标签时，会被angularjs认为是不安全的而自动过滤掉，为了保留这些标签就需要开启非安全模式，这是非常危险的。$sce是angularJS自带的安全处理模块，因此需要$sce.trustAsHtml()方法将数据内容以html的形式解析并返回。

几种绑定方式的对比

(1)ng-bind-html和内置的$sanitize服务

$sanitize会自动对html标签进行净化，并会把标签的属性以及绑定在元素上的事件都移除，仅保留了标签和内容。

ng-bind-html指令是通过一个安全的方式将内容绑定到HTML元素上，该属性依赖于$sanitize，需要在项目中引入angular-sanitize.js文件，并在module定义时注入该服务ngSanitize

 

使用ng-bind-html容易引起XSS(脚本注入攻击)，这一点一定要注意。

(2)ng-bind-html和$sce.trustAsHtml()

它不再经过sanitize服务的净化，直接作为元素的.html()绑定给元素,保留所有的属性和事件，这一行的内容不依赖于ngSanitize模块,$sce服务是内置的。

(3)ng-bind

绑定的值就作为字符串填充到元素里。