Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to have AngularJS output escaped HTML [duplicate]

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?

like image 434
Max Favilli Avatar asked Dec 07 '13 01:12

Max Favilli


People also ask

Do AngularJS provide reusable components?

AngularJS provides reusable components.

What is$ sce in angular?

Strict Contextual Escaping (SCE) is a mode in which AngularJS constrains bindings to only render trusted values. Its goal is to assist in writing code in a way that (a) is secure by default, and (b) makes auditing for security vulnerabilities such as XSS, clickjacking, etc.

What is Ng bind HTML?

The ng-bind-html directive is a secure way of binding content to an HTML element.


2 Answers

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> 
like image 130
Davin Tryon Avatar answered Oct 05 '22 22:10

Davin Tryon


Use this directive:

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

Don't forget to use angular sanitize on your app module.

check here : http://docs.angularjs.org/api/ngSanitize

like image 29
Md. Al-Amin Avatar answered Oct 05 '22 23:10

Md. Al-Amin