Angular通过rootScope传递SCE信任HTML变量仍遭$sce.unsafe错误

嘿，我看你遇到的问题是用ng-bind-html渲染TinyMCE的HTML内容时，明明用了$sce.trustAsHtml()还是报不安全的错误对吧？咱们来看看你的代码问题出在哪：

首先看你写的$rootScope里的txtRefresh函数：

app.run(function($rootScope, $http, $sce, $compile) {
  // 文本解析
  $rootScope.txtRefresh = function(obj) {
    obj = $sce.trustAsHtml(obj);
  };
});

这里的问题很明显——你只是在函数内部把obj处理成了信任的HTML，但没有把处理后的结果返回出去呀！控制器里调用这个函数的时候，也没接收返回值，所以最终绑定到视图上的还是原来那个没被信任的原始HTML字符串，Angular的安全机制当然会报错啦。

给你几个修正方案，选哪个都行：

方案1：让函数返回处理后的信任内容 #

先修改$rootScope的函数，让它返回处理后的结果：

app.run(function($rootScope, $http, $sce, $compile) {
  // 文本解析
  $rootScope.txtRefresh = function(obj) {
    return $sce.trustAsHtml(obj); // 关键：返回处理后的内容
  };
});

然后控制器里的函数也要返回这个值：

$scope.txtRefresh = function (obj) {
  return $rootScope.txtRefresh(obj);
}

最后在视图里，把ng-bind-html绑定到这个函数的返回值上（假设你的TinyMCE内容存在$scope.tinymceContent里）：

<label>Paragraph 1</label>
<div ng-bind-html="txtRefresh(tinymceContent)"></div>

方案2：提前在控制器里处理好信任内容 #

如果不想每次都调用函数，也可以直接在控制器里把TinyMCE的内容处理好，赋值给一个新变量：

// 控制器里
$scope.trustedTinymceContent = $sce.trustAsHtml($scope.tinymceContent);

然后视图直接绑定这个变量：

<label>Paragraph 1</label>
<div ng-bind-html="trustedTinymceContent"></div>

这样就能正常渲染HTML内容，不会再触发$sce的unsafe错误了。

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