Jak renderować tag HTML z wartością json używając angularjs

Question

// JSON jest tak

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

// HTML

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

// Wyjście

Preamble : <p>test<\/p> 

ale jak wyrenderować ten znacznik i wyświetlić go za pomocą kątowego?

// Wyjście powinno być jak ten

Preamble : test 

Answer 1

Zamiast przechodzącą ciąg aby zobaczyć bezpośrednio, należy użyć sce.trustAsHtml do wstępnego przetwarzania html.

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

Następnie w widoku szablonu, stosowanie ng-bind-html do obsługi html wiążące.

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

jak wspomniano masz tablicę obiektów, to nie jest takie łatwe do oddania ich w kontrolerze można wiązać $sce do $scope następnie wywołać trustAsHtml w widoku

Więc w kontrolerze

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

Następnie w widoku html

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

Answer 2

Sprawdź ten działający przykład: http://jsfiddle.net/Shital_D/b9qtj56p/6/

Pobierz plik - angular-sanitize.js i dołącz go do swojej aplikacji.

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>