AngularJS中HTML标签显示而非渲染的解决办法

这是AngularJS的默认安全防护行为啦——为了防止XSS攻击，它会自动转义所有通过{{}}插值的HTML内容，所以你的<br>标签被转换成了实体字符<br>，自然没法渲染成换行效果。要实现你想要的换行，试试下面这两种方法：

方法一：使用ng-bind-html + ngSanitize模块 #

这是最规范的做法，Angular的ngSanitize模块会帮你自动清理并渲染安全的HTML内容：

1. 首先确保你的项目中引入了ngSanitize模块（可通过npm安装或直接引入对应脚本文件），然后在你的应用模块中声明依赖：

angular.module('yourAppName', ['ngSanitize']);

2. 把HTML里的{{ someVar }}替换成ng-bind-html指令：

<div ng-bind-html="someVar"></div>

这样Angular就会正确识别并渲染<br>标签，输出换行后的文本啦。

方法二：用$sce服务手动信任HTML #

如果你不想引入额外的ngSanitize模块，也可以通过$sce（Strict Contextual Escaping）服务手动标记你的HTML内容为“安全可信任”：

1. 在控制器中注入$sce服务，然后把变量包装成信任的HTML：

angular.module('yourAppName').controller('YourController', function($scope, $sce) {
  $scope.someVar = $sce.trustAsHtml("Some<br>text<br>here");
});

2. 同样在HTML中使用ng-bind-html指令：

<div ng-bind-html="someVar"></div>

⚠️ 注意：只有当你完全信任这个HTML内容的来源时，才推荐用第二种方法哦，否则可能会引入XSS安全风险。

内容的提问来源于stack exchange，提问作者Serge Inácio