html - 如何使用 angularJs 从 json 值呈现 HTML 标记

Question

//json是这样的

"_unparsedString": "<p>test<\/p>"

//HTML

<div>Preamble : '{{item2._unparsedString}}'</div>

//输出

Preamble : <p>test<\/p>

但是如何渲染该标签并使用 angular 显示它？

//输出应该是这样的

 Preamble : test

Answer 1

您应该使用sce.trustAsHtml 而不是直接传递字符串来查看预处理 html。

$scope.bindHTML = $sce.trustAsHtml(item2._unparsedString);

然后在您的 View 模板中，使用 ng-bind-html 来处理 html 绑定(bind)。

<div>Preamble : <div ng-bind-html="bindHTML"></div></div>

正如您提到的，您有一个对象数组，将它们转换到您的 Controller 中并不容易，您可以将 $sce 绑定(bind)到您的 $scope 然后调用 trustAsHtml 在你看来

所以在你的 Controller 中

myapp.controller('mainController', function ($scope, $http, $filter, $sce) {
   $scope.$sce = $sce;
...
}

然后在你的html View 中

<div>Preamble {{$index+1}} : <span ng-bind-html="$sce.trustAsHtml(item1.Preamble._unparsedString)"></span></div>