AngularJs: How to decode HTML entities in HTML? [duplicate]

Answer 1

Add the angular.sanitize.js

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

add the dependency as,

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

NOW Decode the html string and pass it to ng-bind-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>

I think you can avoid the filter see the below example.

example

Answer 2

I think you need to perform one more "decoding" step before you pass it to $sce. For example like this:

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

Demo: http://plnkr.co/edit/LrT4tgYtTu4CPrOAidra?p=preview