javascript - 在 AngularJS 中读取 JSON 会按原样打印 HTML 标签

Question

这是JSFiddle文件我正在尝试让它工作。

我做了一个简单的过滤器来更改 \n从 JSON 到 <br> 的换行符在 HTML 中给出换行符，但它没有按预期工作。

问题是:在输出 <br> 中标签按原样显示，而不是由浏览器呈现为 line-break。

到目前为止，我已尝试使用 $sce 制作新过滤器变量如

angular.module('myApp.filters', [])
  .filter('linebreak', function() {
    return function(text) {
        return text.replace(/\n/g, '<br>');
    }
})
.filter('to_trusted', ['$sce', function($sce){
            return function(text) {
                return $sce.trustAsHtml(text);
            };
        }]);

并将过滤器插入 ng-bind 中像:

<div ng-bind="data.para | linebreak | to_trusted"></div>

但这并不能解决问题。在这种情况下，有什么提示可以告诉浏览器
是 HTML 并将其呈现为换行符吗？

Answer 1

当您在 html 中使用 $sce 时，您必须使用 ng-bind-html 指令而不是 ng-bind:

<div ng-app="myApp">
    <div ng-controller="jsonCtrl">
        <div ng-repeat="data in textFile">
            <div ng-bind-html="data.para | linebreak | to_trusted">        </div>
      </div>
    </div>
</div>

You can see this working here