关于angularjs返回的json不转义问题

最新推荐文章于 2024-05-15 19:48:50 发布

原创最新推荐文章于 2024-05-15 19:48:50 发布 · 2.3k 阅读

CC 4.0 BY-SA版权

在AngularJS项目中，当后台返回包含HTML标签的数据时，这些标签默认被视为字符串，不会被解析。为了解决这个问题，需要使用$sce服务将JSON的HTML内容标记为安全。通过$sce.trustAsHtml()可以确保数据被正确地显示为HTML。另外，还可以创建一个名为'to_trusted'的过滤器，配合ng-bind-html指令，简化在模板中使用安全HTML的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

但在我们的项目当中会遇到这样的情况，后台返回的数据中带有各种各样的html标签。如：

bugList.name=<font color="red">aaaa</font>12

这段话放在html中是会被转义的。也就是说会当成字符串输出来，不会被解析，这里是做一个高亮显示。需要变为红色

我们必须要使用$sce这个服务来解决我们的问题。所谓sce即“Strict Contextual Escaping”的缩写。

后台返回来json的html标签内容在angularjs来说，是不安全的，需要我们用$ sce.trustAsHtml() 标记为安全

 for(var i=0;i<$scope.list.length;i++){//对每个name标记为htmlsave
    	  var bugList=$scope.list[i];
    	  bugList.name= $sce.trustAsHtml(bugList.name);
      	}

然后在页面可以使用这种：

 <a style="color:#0033FF" href="#"  data-ng-bind-html="bugList.name">
		 </a>

注意没标记的属性data-ng-bind-html 是获取不到值的

要方便的话，可以使用过滤器，在后面加 | to_trusted 就可以了，用ng-bind-html

'use strict';

/* 过滤器 */

angular.module("myApp.bugFilter",[])

//输出html文本的过滤器
.filter('to_trusted', ['$sce', function ($sce) {
        return function (text) {
            return $sce.trustAsHtml(text);
        }
    }]
)