AngularJS ng-bind-html绑定内容时字符串换行不生效解决方法

两种写法不生效的原因非常明确：

• HTML默认渲染规则会把普通文本中的\n识别为普通空白字符，不会渲染为实际换行，除非元素配置了对应CSS属性
• ng-bind-html受AngularJS内置的安全策略约束，未被标记为可信的HTML标签会被直接过滤，你插入的<br>大概率在渲染阶段被过滤；另外还要排查自定义的replaceVariables过滤器是否存在逻辑把<br>转义成了文本实体<br>，这种情况下标签会被当作普通文本显示，不会产生换行效果。

二选一即可实现需求：

方案1：标记HTML内容为可信（最符合HTML语义，无需额外CSS） #

第一步先确认项目已引入和AngularJS版本匹配的angular-sanitize.js文件，且模块依赖中已添加ngSanitize，否则ng-bind-html本身无法正常工作。
第二步改造自定义的replaceVariables过滤器，注入$sce服务，将最终替换完成的内容标记为可信HTML，避免<br>被过滤：

// 过滤器改造示例
angular.module('yourModuleName')
.filter('replaceVariables', ['$sce', function($sce) {
  return function(template, config) {
    // 保留你原有的变量替换、货币格式化逻辑即可
    let result = template.replace(`%${config.key}%`, config.value);
    // 最终返回经过信任处理的HTML内容
    return $sce.trustAsHtml(result);
  }
}]);

改造完成后，你之前拼接<br>的绑定写法就能正常渲染换行：

<div
  ng-repeat="amount in leftAmounts"
  ng-if="$index < 3"
  class="btn-left-lg"
  role="button"
  ng-bind-html="res.strings[amount.type] + '<br>: %AMOUNT%' | replaceVariables: {'key':'AMOUNT', 'value': amount.amount, 'type': 'currency', 'currencyCode': transfer.currencyCode}">
</div>

方案2：通过CSS识别\n换行（无需改动JS逻辑） #

如果不想调整过滤器代码，可以保留你最初拼接\n的写法，只需要给对应元素的CSS类添加一行规则，让浏览器识别文本中的换行符：

.btn-left-lg {
  white-space: pre-line;
}

该属性会保留文本中的手动换行符，自动折行，不需要处理HTML安全信任逻辑。

如果按上述方案修改后仍不生效，按顺序排查：

• 打开浏览器控制台，确认没有报$sce:unsafe类的安全策略错误，若有则检查ngSanitize的引入和模块依赖配置
• 输出过滤器最终返回的内容，确认<br>没有被转义为<br>文本实体，如果存在转义逻辑，去掉对应转义即可
• 检查res.strings[amount.type]的内容是否存在未闭合的HTML标签，导致DOM解析时<br>被判定为无效内容丢弃

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