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

Question

这是 JSFiddle文件我正在努力让它工作。

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

问题是:在输出中<br>标记按原样显示，而不是由浏览器呈现为换行符。

到目前为止，我已尝试使用 $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