angularjs解析带换行\n的字符串

前端之家收集整理的这篇文章主要介绍了angularjs解析带换行\n的字符串前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

问题

我需要将数据库中存储的字符串在html页面显示,结果发现字符串中的\n在页面是没有作用,也就是没有换行。

解决

方法一:

百度了,大家都说用ng-bind-html,这个对有的字符串可以解析,但是一般会报错。

[$sce:unsafe] Attempting to use an unsafe value in a safe context.

这是因为Angularjs为了系统安全着想,在Web安全中XSS(Cross-site scripting,脚本注入攻击),它是在Web应用程序中很典型的计算机安全漏洞。XSS攻击指的是通过对网页注入可执行客户端代码且成功地被浏览器执行,来达到攻击的目的,形成了一次有效XSS攻击,一旦攻击成功,它可能会获取用户的一些敏感信息、改变用户的体验、诱导用户等非法行为,有时XSS攻击还会合其他攻击方式同时实施比如sql注入攻击服务器和数据库、Click劫持、相对链接劫持等实施钓鱼,它带来的危害是巨大的,也是web安全的头号大敌

所以在angular中默认是不相信添加的HTML内容,对于添加的HTML内容,首先必须利用$sce.trustAsHtml,告诉angular这是可信的HTML内容。否则你将会得到$sce:unsafe的异常错误

方法

controller('demo',['$scope','$http','$routeParams','$sce',function ($scope,$http,$routeParams,$sce) {
$http.get('/api/work/get?vultop=' + $routeParams.vultop)
.success(function (work) {    

    $scope.vuldetail = $sce.trustAsHtml(vultop.vulDetail);

});

module中
ng-bind-html="vuldetail"

这时,我们会发现AngularJS竟然把\n转换成了空格,所以我们还有在处理的文本中加入

text = vultop.vulDetail.replace(/\n/g,'<br />');
$scope.vuldetail = $sce.trustAsHtml(text);

猜你在找的Angularjs相关文章