在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将过滤器管道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>

你可以看到这里工作

Answer 2

使用ng-bind-html进行html绑定。

更换

NG-绑定

至：

NG绑定，HTML

查看ngBindHtml的 Angular文档