如何在AngularJS中渲染AJAX获取的转义HTML标签内容？

这个场景我太熟悉了——AngularJS默认会对{{}}插值表达式里的内容做HTML转义，所以你的转义字符串<b>String</b>会被原样输出成<b>String</b>文本，而不是渲染成加粗的文字。要让HTML标签生效，你需要用到AngularJS的ng-bind-html指令和$sce安全服务，具体方法如下：

方法一：在控制器中直接标记内容为安全HTML #

1. 首先在你的控制器中注入$sce服务（Strict Contextual Escaping，严格上下文转义，用来防止XSS攻击）。
2. 对AJAX获取到的JSON数据中的sample属性进行处理，标记它为可信任的HTML内容。

示例控制器代码：

angular.module('yourAppName', [])
.controller('YourController', ['$scope', '$sce', function($scope, $sce) {
    // 模拟AJAX返回的JSON数据
    $scope.dataItems = [
        { sample: "<b>String</b>" }
    ];

    // 遍历数据，处理每个item的sample属性
    $scope.dataItems.forEach(function(item) {
        item.sample = $sce.trustAsHtml(item.sample);
    });
}]);

3. 在视图中替换插值表达式为ng-bind-html指令：

<table>
    <tr ng-repeat="item in dataItems">
        <td ng-bind-html="item.sample"></td>
    </tr>
</table>

方法二：创建自定义过滤器（更复用） #

如果多个地方都需要处理这类转义HTML，推荐创建一个可复用的过滤器，避免重复代码：

1. 定义一个名为trustHtml的过滤器：

angular.module('yourAppName')
.filter('trustHtml', ['$sce', function($sce) {
    return function(rawHtml) {
        return $sce.trustAsHtml(rawHtml);
    };
}]);

2. 在视图中直接使用过滤器配合ng-bind-html：

<table>
    <tr ng-repeat="item in dataItems">
        <td ng-bind-html="item.sample | trustHtml"></td>
    </tr>
</table>

注意事项 #

• $sce是AngularJS的安全机制，只标记你完全信任的内容为安全HTML，如果数据来自不可靠的用户输入，直接渲染可能会导致XSS攻击风险。
• 如果你的字符串是双重转义的（比如服务器端转义了两次，变成<b>String</b>），需要先做一次解码，比如用decodeURIComponent()或者AngularJS的$sanitize服务处理后再使用上述方法。

内容的提问来源于stack exchange，提问作者Anindya Dutta