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

来源:互联网 发布:淘宝杂货铺在哪儿 编辑:程序博客网 时间:2024/05/16 02:10

问题

我需要将数据库中存储的字符串在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);
 
原创粉丝点击