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

Answer 2

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

替换

纳克绑定

要：

纳克绑定-HTML

查看ngBindHtml

的Angular文档

在AngularJS中读取JSON会按原样打印HTML标记

2 个答案: