Подтвердить что ты не робот

Как отобразить тег HTML из значения json с помощью angularJs

//json подобен этому

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

//HTML

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

//Выход

Preamble : <p>test<\/p>

но как сделать этот тег и отобразить его с помощью angular?

//Выход должен быть таким:

 Preamble : test

Ответ 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 в своем представлении

Итак, в вашем контроллере

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>

Ответ 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>