当前位置:

angularJS绑定数据时自动转义html标签

本文最后更新于2016-07-11,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!

温馨提示:本文共908个字,读完预计3分钟。

angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取带格式的文本时,无法正常的显示在页面中。

但是坑爹的事来了,接口里返回了html内容给我,我前端展现的时候,将html标签也给显示出来了,而且没有正确解析html。。

后来发现(偶然看到一篇博文),ng-bind-html中也是可以绑定循环时的数据的,也就是之前我一直以为ng-bind-html中只可以绑定在后端$scope中定义的变量,实际上是可以这么绑定的:

html:

1
2
3
4
5
6
<ul>
  <li ng-repeat="n in instructions">
     <h3 ng-cloak>{{n.title}}</h3>
     <p ng-cloak ng-bind-html="n.content | trustHtml"></p>
  </li>
</ul>

js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
angular.module("myapp").controller("ProductsInsCtrl", ["$scope", "$state", "$stateParams", "ProductsInsServiceMain",
    function ($scope, $state, $stateParams, ProductsInsServiceMain) {
 
        var id = $stateParams.id;
        ProductsInsServiceMain.goodsIns(id).then(function(res){
            if(res.apiStatus == 0){
                $scope.instructions = res.instructions;
            }else{
                showEmptyEx(res.apiMessage);
            }
        });
    }]);
 
 
angular.module("myapp").filter('trustHtml', function ($sce) {
    return function (input) {
        return $sce.trustAsHtml(input);
    }
});

于是html就正确解析了,如图:

angularJS绑定数据时自动转义html标签-何海宝的博客

其中$sce是angularJS自带的安全处理模块,$sce.trustAsHtml(input)方法便是将数据内容以html的形式进行解析并返回。
将此过滤器添加到ng-bind-html所绑定的数据中,便实现了在数据加载时对于html标签的自动转义。

本篇完~

版权申明:本文地址 ,本博客所有文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果!

我要说两句