Prevent Angular from escaping HTML

Question

When Angular interpolates markup and inserts scoped variables into a {{post}} style template, it escapes HTML.

The application I'm building requires users to create the templates, using curly brace notation to insert variable names, I don't want to overcomplicate it by bringing in directives for some variables and curlies for others.

Is there a way to render non escaped HTML through curly templates?

My only alternative is to render a proxy element when the user attempts to render {{post}}, which I can then grab with jQLite and insert the HTML by hand, but that is all shades of messy. Any ideas?

I don't think there is (for what that's worth); but what you might do is replace {{post}} by something like <span ng-bind-html="post"></span> when you process the template. Be sure not to open yourself up to injection attacks, although that's more a risk if you use ng-bind-html-unsafe since ng-bind-html still does some sanitizing. — towr
– towr, Commented Dec 26, 2013 at 8:02

Ryan Q · Accepted Answer · 2018-06-30 21:17:33Z

23

Your going to want to look at ngBindHtml.

"To utilize this functionality, ensure that $sanitize is available, for example, by including ngSanitize in your module's dependencies (not in core Angular.)"

edited Jun 30, 2018 at 21:17

answered Dec 26, 2013 at 9:42

Ryan Q

10.7k2 gold badges36 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Muhammad Umer Over a year ago

It overrides everything inside the element as well. Where with filter i could have done this, Hi, today you are feeling {{ ':happy_face:' | emoji }}

Collectives™ on Stack Overflow

Prevent Angular from escaping HTML

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related