AngularJS 1.5.6中HTML字符解码问题求助

问题根源 #

AngularJS默认会对插值表达式{{}}中的内容进行HTML转义，目的是防范XSS攻击，但这也导致你的HTML代码（比如<sup>标签）被当成纯文本显示，而非被浏览器解析渲染。另外，你在控制器里直接操作DOM的写法（$scope.stockCheckAppLoad.innerHTML）不符合AngularJS的数据驱动理念，本身就是错误的。

解决方案步骤 #

1. 用ng-bind-html替代插值表达式

ng-bind-html是AngularJS专门用来渲染HTML内容的指令，它会绕过默认的HTML转义，但需要确保内容安全（或手动信任内容）。

2. 引入并依赖ngSanitize模块（推荐安全方案）

AngularJS需要ngSanitize模块自动清理不安全的HTML内容，避免XSS风险：

• 先确保项目中引入了与AngularJS 1.5.6版本匹配的angular-sanitize.js
• 在模块定义中注入ngSanitize依赖：

// app.js 修改模块定义
var app = angular.module('stockCheckApp', ['utils.autofocus', 'ngSanitize']);

3. 修正控制器的数据绑定逻辑

不要直接操作DOM，而是把接口返回的数据赋值给$scope变量：

// core.js 修改控制器代码
app.controller('stockCheckAppController', function ($scope, $http) {
    stockCheckAppLoad();
    function stockCheckAppLoad() {
        $http.get("https://example.com/getSto")
            .success(function (stockCheckAppData) {
                // 将返回数据绑定到作用域变量，供视图调用
                $scope.stockCheckAppData = stockCheckAppData;
            });
    }
});

4. 修改HTML视图，使用ng-bind-html

把原来的插值表达式替换成ng-bind-html指令：

<!-- index.html 修改后的代码 -->
<h3 class="text-white" ng-bind-html="stockCheckAppData.name"></h3>

备选方案：手动信任HTML（仅适用于确定内容安全的场景） #

如果你的HTML内容完全可信（比如由自有服务器生成，无用户输入内容），可以不用引入ngSanitize，而是用$sce服务手动信任HTML：

• 控制器中注入$sce并处理数据：

app.controller('stockCheckAppController', function ($scope, $http, $sce) {
    stockCheckAppLoad();
    function stockCheckAppLoad() {
        $http.get("https://example.com/getSto")
            .success(function (stockCheckAppData) {
                // 手动标记HTML内容为安全可信任
                $scope.stockCheckAppData = {
                    name: $sce.trustAsHtml(stockCheckAppData.name)
                };
            });
    }
});

• 视图依然使用ng-bind-html指令即可。

为什么之前的方法无效？ #

• 用{{}}插值时，AngularJS会自动把<转成<、>转成>，导致HTML标签被当作纯文本显示。
• 直接操作DOM的写法违背了AngularJS数据驱动的设计模式，$scope是作用域容器而非DOM元素，这种写法本身就无法正确完成数据绑定。

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