Làm thế nào để làm cho một thẻ HTML từ giá trị json sử dụng angularJs

Question

// json là như thế này

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

// HTML

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

// Output

Preamble : <p>test<\/p> 

nhưng làm thế nào để làm cho thẻ đó và hiển thị nó bằng cách sử dụng góc?

// Output nên như thế này

Preamble : test 

Answer 1

Thay vì đi qua chuỗi để xem trực tiếp, bạn nên sử dụng sce.trustAsHtml để html trước quá trình.

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

Sau đó, trong mẫu xem của bạn, hãy sử dụng ng-bind-html để xử lý liên kết html.

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

Như bạn nói bạn có một mảng các đối tượng, nó không phải là dễ dàng để đúc chúng trong điều khiển của bạn, bạn có thể ràng buộc $sce-$scope của bạn sau đó gọi trustAsHtml theo quan điểm của bạn

Vì vậy, trong điều khiển của bạn

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

Sau đó, theo quan điểm html của bạn

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

Answer 2

Vui lòng kiểm tra ví dụ làm việc này: http://jsfiddle.net/Shital_D/b9qtj56p/6/

Tải xuống tệp - angular-sanitize.js và đưa nó vào ứng dụng của bạn.

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>