AngularJS 渲染 <br> 为文本而非换行符的解决方案

当使用 AngularJS 来渲染页面时，你可能会遇到一个问题：在 HTML 中使用 <br> 标签来表示换行，在 AngularJS 渲染后，这个标签被转义成了文本，而不是实际执行换行操作。这可能会导致用户界面显示异常或者无法按照期望的方式展示内容。

问题的原因

这个问题的根源在于 AngularJS 的默认安全策略。AngularJS 默认会对所有 HTML 输出进行转义以防止 XSS 攻击，也就是将一些特殊字符像 < 和 > 转换成它们的 HTML 实体形式，比如 < 和 >。同样的，<br> 标签也会被转义成 <br> 的形式，从而失去了它的原本作用。

解决方案

为了解决这个问题，我们需要告诉 AngularJS 不要对 <br> 标签进行转义。有以下两种方法可以做到这点：

方法一：使用 ng-bind-html-directive

ng-bind-html-directive 是 AngularJS 提供的一个指令，它允许你绕过默认的安全策略，直接把包含 HTML 标签的字符串渲染成 HTML。下面是一个使用 ng-bind-html-directive 渲染包含 <br> 标签的字符串的例子：

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

在 controller 中，我们需要把包含 <br> 标签的原始字符串放到 $sce.trustAsHtml() 方法中转换成信任的 HTML：

angular.module('myApp', [])
  .controller('myController', function($scope, $sce) {
    $scope.myHtml = $sce.trustAsHtml('This is a line.<br>This is another line.');
});

方法二：使用 $sanitize 服务

$sanitize 是 AngularJS 提供的一个服务，用于消毒未知来源的 HTML。$sanitize 会去掉所有不安全的 HTML 标签和属性，并把一些特殊字符像 & 和 " 转换成它们的实体形式。但是，它会保留一些常见标签如 <b>、<i> 等以及文本格式化标签如 <br> 和 <p> 的特殊作用。下面是一个使用 $sanitize 渲染包含 <br> 标签的字符串的例子：

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

在 controller 中，我们需要注入 $sanitize 服务，然后将包含 <br> 标签的字符串传递给它：

angular.module('myApp', [])
  .controller('myController', function($scope, $sanitize) {
    $scope.myHtml = $sanitize('This is a line.<br>This is another line.');
});

总结

当使用 AngularJS 渲染包含 <br> 标签的字符串时，需要注意默认安全策略会把这个标签转义成文本。可以使用 ng-bind-html-directive 指令或 $sanitize 服务来绕过这个问题。在实际开发中，我们应该选择最合适的解决方案并根据需要进行调整以确保网页正常展示和安全性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25456