How to have AngularJS output escaped HTML

javascript json angularjs html-escape-characters
Max Favilli picture Max Favilli · Dec 7, 2013 · Viewed 73.5k times · Source

I am getting JSON data from the server, one of the field contains escaped html (an email body actually):

<html>\r\n<head>\r\n<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">\r\n</head>\r\n<body dir="auto">\r\n<div>Buonasera, ho verificato i dati sul mio account ed il numero di cell che vi ho fornito</div>\r\n<div><br>\r\n<a (more...)

I am getting crazy at trying to render it with AngularJs.

The following is not working:

<div ng-bind-html-unsafe="mail.htmlbody"></div>

Which I believe is normal because the html is in fact escaped. Should I unescape it first? Is Angular capable of unescaping html with some available service?

If I use $sce like this:

scope.mail.htmlbody = $sce.trustAsHtml(scope.mail.htmlbody);

The source html is displayed, inspecting the element I can see the content is quoted. In other words in the page the source html is displayed instead of the html being rendered. Maybe I am missing something?

Answer

Davin Tryon picture Davin Tryon · Dec 7, 2013

At the same time $sce service was introduced (angular 1.2), support for ng-bind-html-unsafe directive was dropped. The new directive is ng-bind-html. If you use this, the code should work as documented:

 <div ng-bind-html="mail.htmlbody"></div>

Related questions

SyntaxError: Unexpected token o in JSON at position 1

I parse few data using a type class in my controller I'm getting data as follows: { "data":{ "userList":[ { "id":1, "name":"soni" } ] }, "status":200, "config":{ "method":"POST", "transformRequest":[ null ], "transformResponse":[ null ], "url":"/home/main/module/userlist", "headers":{ "rt":"ajax", "Tenant":"Id:null", "…

Read More
Get specific object by id from array of objects in AngularJS

I have a JSON file containing some data I d like to access on my AngularJS website. Now what I want is to get only one object from the array. So I d like for example Item with id 1. The …

Read More
AngularJS format JSON string output

I have an AngularJS application, which collects data from input, transforms a model into a string using JSON.stringify() and lets a user edit this model in such a way that input fields get updated if the <textarea> …

Read More