Angular编译返回数据后信任HTML失效，报非字符串值错误

这个问题我之前也碰到过，咱们一步步拆解下问题所在和解决办法哈～

为什么会报错？ #

你遇到的错误Attempted to trust a non-string value in a content requiring a string: Context: html，核心原因有两个：

1. $sce.trustAsHtml要求参数是字符串：如果response.data.PostContent本身不是字符串类型（比如是对象、数字等），直接传进去就会触发这个错误。
2. $compile的返回值不是字符串：你代码里把$compile(trustedData)的结果赋值给scope.model.postContent，但$compile的作用是把HTML模板编译成链接函数，不是可直接绑定的HTML字符串，后续用ng-bind-html绑定的时候，自然会因为拿到非字符串值而报错。

针对不同需求的解决办法 #

需求1：只是渲染静态HTML（不需要解析Angular指令，比如ng-click/ng-repeat） #

这种情况最简单，只需要确保内容是字符串，然后用$sce.trustAsHtml处理后直接绑定即可：

if (response.data) {
  // 先把内容转为字符串，避免非字符串类型的问题
  const postContentStr = String(response.data.PostContent);
  // 信任HTML后赋值给scope变量
  scope.model.postContent = $sce.trustAsHtml(postContentStr);
}

然后在模板里用ng-bind-html绑定：

<div ng-bind-html="model.postContent"></div>

需求2：需要编译HTML里的Angular指令（比如里面有自定义指令、ng-click等） #

如果你的HTML内容里包含Angular相关的指令，直接用ng-bind-html只会渲染静态内容，指令不会生效。这时候需要手动编译DOM元素：

首先在模板里准备一个容器：

<div id="post-content-container"></div>

然后在控制器里处理：

if (response.data) {
  // 确保内容是字符串
  const postContentStr = String(response.data.PostContent);
  // 信任HTML内容
  const trustedHtml = $sce.trustAsHtml(postContentStr);
  // 获取目标容器
  const container = document.getElementById('post-content-container');
  // 将信任后的HTML插入容器
  container.innerHTML = trustedHtml;
  // 编译容器内的内容并链接到当前scope，让Angular指令生效
  $compile(container.contents())(scope);
}

额外注意点 #

• 永远要确保传入$sce.trustAsHtml的是字符串，避免因为接口返回数据类型不符合预期导致报错。
• 如果是频繁更新HTML内容，记得清理之前编译的内容，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Charles L.