AngularJS中如何绑定HTML标签以渲染样式化内容？

这个问题我碰到过很多次——AngularJS为了防止XSS攻击，默认会自动转义所有通过{{}}插值输出的HTML内容，所以你看到的是原始代码而不是渲染后的红色文本。下面给你两种实用的解决方法：

方法一：使用ng-bind-html + $sce服务 #

AngularJS专门提供了ng-bind-html指令用来渲染HTML内容，但需要配合$sce（Strict Contextual Escaping）服务标记你的HTML是安全可信的。

步骤1：在控制器中注入$sce并处理HTML #

// 假设你的应用模块是app
angular.module('app', [])
.controller('MainController', function($scope, $sce) {
  // 用$sce.trustAsHtml标记HTML为安全内容
  $scope.out_html = $sce.trustAsHtml("<p style='color:red'>John Smith</p>");
});

步骤2：在模板中使用ng-bind-html替代插值 #

<div ng-controller="MainController">
  <div ng-bind-html="out_html"></div>
</div>

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

如果你的项目中需要多次处理HTML渲染，创建一个自定义过滤器会更方便，不用每次都在控制器里调用$sce.trustAsHtml。

步骤1：定义过滤器 #

angular.module('app', [])
.filter('trustHtml', ['$sce', function($sce) {
  return function(htmlContent) {
    return $sce.trustAsHtml(htmlContent);
  };
}])
.controller('MainController', function($scope) {
  // 直接赋值原始HTML即可
  $scope.out_html = "<p style='color:red'>John Smith</p>";
});

步骤2：模板中使用过滤器 #

<div ng-controller="MainController">
  <div ng-bind-html="out_html | trustHtml"></div>
</div>

⚠️ 注意事项：

• 只对你完全信任的HTML内容使用这些方法，不要处理用户输入的未知HTML，否则可能引入XSS安全风险。
• 不要尝试关闭AngularJS的SCE机制，这会破坏内置的安全防护。

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