AngularJs: Как декодировать HTML-объекты в HTML?

Question

ПОЛОЖЕНИЕ:

Я Bulding веб-страницы, содержание которых взято вызове API, который возвращает данные в формате JSON.

Проблема заключается в том, что теги html задаются как объекты HTML, которые необходимо декодировать.

Пример:

Это пример JSON я имею дело с:

<p align="justify"><strong>15<sup>th</sup> HERE THERE IS A BOLD TEXT </strong> HERE SOME NORMAL TEXT... 

ПОПЫТКА:

У меня есть затрачивают исследовать его, и кажется, труднее, чем я думал. Глядя в Google и подобные SO вопрос, возможное решение заключается в использовании NG-Бинг-Html

Api вызов:

$http.get('http://API/page_content').then(function(resp) 
{ 
    $scope.content_test = resp.data[0].content; 
} 

Фильтр:

.filter('trusted', ['$sce', function($sce){ 
    return function(text) { 
     return $sce.trustAsHtml(text); 
    }; 
}]) 

Ng-связывать-HTML в Угловой вид:

<div ng-bind-html=" content_test | trusted"></div> 

ВЫХОД:

Это выход в представлении (точно так, как вы его видите):

<p align="justify"><strong>15<sup>th<\/sup> HERE THERE IS A BOLD TEXT<\/strong> HERE SOME NORMAL TEXT... 

но то, что мне нужно, чтобы увидеть текст правильно отформатирован:

ЗДЕСЬ ЕСТЬ BOLD TEXT ЗДЕСЬ нормальный текст ...

ВОПРОС:

Как я могу расшифровать HTML entit ies в надлежащем формате HTML в AngularJs?

Answer 1

Я думаю, что вам нужно выполнить еще один «декодирования» шаг, прежде чем передать его $sce.Например, как это:

app.filter('trusted', ['$sce', function($sce) { 
    var div = document.createElement('div'); 
    return function(text) { 
     div.innerHTML = text; 
     return $sce.trustAsHtml(div.textContent); 
    }; 
}]); 

Демо:http://plnkr.co/edit/LrT4tgYtTu4CPrOAidra?p=preview

Answer 2

Добавьте angular.sanitize.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.js"></script> 

добавить зависимость как,

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

NOW Декодирование HTML строку и передать его нг-связывания в HTML.

$http.get('http://API/page_content').then(function(resp) 
{ 
    var html = resp.data[0].content; 

    var txt = document.createElement("textarea"); 
    txt.innerHTML = html; 


    $scope.content_test = txt.value; 

    //if you use jquery then use below 
    //$scope.content_test = $('<textarea />').html(html).text();   
} 

<div ng-bind-html="content_test"></div> 

Я думаю, вы можете избежать filter, см. Нижеприведенный пример.

example