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);

然后在您的视图模板中，使用ng-bind-html处理html绑定。

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

正如您所提到的，您有一个对象数组，在控制器中投射它们并不容易，您可以将$sce绑定到$scope，然后在视图中调用trustAsHtml < / p>

所以在你的控制器中

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

然后在你的html视图中

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

Answer 2

请查看此工作示例：http://jsfiddle.net/Shital_D/b9qtj56p/6/

下载文件 - angular-sanitize.js并将其包含在您的应用中。

var app = angular.module('myApp', ["ngSanitize"]);       

app.controller('myController', function($scope,$compile) {
    $scope.html = '<p>Your html code</p>';
});

<div ng-app="myApp">
     <div ng-controller="myController">
     <p ng-bind-html="html"></p>
</div>

如何使用angularJs从json值渲染HTML标记

2 个答案: