从SQLite数据库到AngularJS页面：HTML代码无法正常渲染求助

问题根源 #

1. 数据库中存储的是转义后的HTML实体（如<h1>），直接输出会被当作字符串而非HTML标签。
2. 循环内重复定义AngularJS模块与控制器，会导致框架报错且逻辑混乱。
3. ng-bind-html要求传入Angular信任的HTML内容，未标记可信的字符串会被过滤。

修复方案 #

方案1：基于原有Razor循环调整

@using System.Web;

<!-- Angular模块与控制器只定义一次，放在循环外 -->
<script type="text/javascript">
    var app = angular.module('magnos', ['ngSanitize']);
    app.controller('mycont', function ($scope, $sce) {
        // 定义通用方法，将HTML字符串标记为可信内容
        $scope.trustHtml = function(htmlStr) {
            return $sce.trustAsHtml(htmlStr);
        };
    });
</script>

<!-- 页面根节点绑定Angular应用 -->
<div ng-app="magnos" ng-controller="mycont">
    @foreach (DataRow Row in DT.Rows)
    {
        <p>@Row.ItemArray[1]</p>
        <!-- 1. 后端解码HTML实体 2. 传入Angular标记为可信后渲染 -->
        <span ng-bind-html="trustHtml('@HttpUtility.HtmlDecode(Row.ItemArray[2].ToString())')"></span>
        <hr />
    }
</div>

方案2：更符合Angular风格的渲染（推荐）

将后端数据转为JSON传给前端，用ng-repeat渲染，避免混合Razor与Angular循环：

@using Newtonsoft.Json;
@{
    // 将DataTable转为JSON字符串
    var tableJson = Html.Raw(JsonConvert.SerializeObject(DT));
}

<script type="text/javascript">
    var app = angular.module('magnos', ['ngSanitize']);
    app.controller('mycont', function ($scope, $sce) {
        // 接收后端传入的JSON数据
        $scope.dataRows = @tableJson;
        
        $scope.trustHtml = function(htmlStr) {
            // 若后端已解码，可移除HttpUtility.HtmlDecode
            return $sce.trustAsHtml(HttpUtility.HtmlDecode(htmlStr));
        };
    });
</script>

<div ng-app="magnos" ng-controller="mycont">
    <div ng-repeat="row in dataRows">
        <p>{{row[1]}}</p>
        <span ng-bind-html="trustHtml(row[2])"></span>
        <hr />
    </div>
</div>

关键说明 #

• HttpUtility.HtmlDecode：将数据库中的转义实体（如<）还原为真实HTML标签（<）。
• $sce.trustAsHtml：告诉Angular该HTML内容是安全的，允许ng-bind-html渲染它（需确保数据库中的HTML无恶意代码，避免XSS风险）。
• 避免重复定义模块/控制器：Angular模块与控制器只能初始化一次，循环内重复定义会导致框架异常。

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