当前位置:

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

0

发表时间:2017-09-08    来源:ishouyou.cn

48

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

因此要对html进行转义,则要在数据绑定的html标签中使用ng-bind-html属性

(1)模板代码

<ul class="col">

<li ng-repeat="x in dt_records" ng-bind-html="TrustDangerousSnippet(x)">

{{x.dt_info}}

</li>

</ul>

(2)controllers.js控制器代码

//显示动态数据

$scope.dt_records = [

{

"dt_info" : '<em class=\"time\">jq** 33分钟前</em>兑换10元充值卡<em class=\"color-red\">使用1000积分<i class=\"icon icon-qiandai\"></i></em>',

},{

"dt_info" : '<em class=\"time\">ttt** 35分钟前</em>兑换10元充值卡<em class=\"color-red\">使用1000积分<i class=\"icon icon-qiandai\"></i></em>',

},{

"dt_info" : '<em class=\"time\">333** 38分钟前</em>兑换10元充值卡<em class=\"color-red\">使用1000积分<i class=\"icon icon-qiandai\"></i></em>',

},{

"dt_info" :'<em class=\"time\">444** 40分钟前</em>兑换10元充值卡<em class=\"color-red\">使用1000积分<i class=\"icon icon-qiandai\"></i></em>',

}

]

$scope.TrustDangerousSnippet = function(dt_records) {

return $sce.trustAsHtml(dt_records.dt_info);

};

查看更多精彩内容,请
顶一下:
+1
0