25

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?

Dan Prince
  • 29,491
  • 13
  • 89
  • 120
  • 5
    I don't think there is (for what _that's_ worth); but what you might do is replace `{{post}}` by something like `` when you process the template. Be sure not to open yourself up to [injection attacks](http://en.wikipedia.org/wiki/Code_injection), although that's more a risk if you use `ng-bind-html-unsafe` since `ng-bind-html` still does some sanitizing. – towr Dec 26 '13 at 08:02
  • 1
    possible duplicate of [AngularJS: Insert HTML from a string](http://stackoverflow.com/questions/14761724/angularjs-insert-html-from-a-string) – Nick Grealy May 12 '15 at 00:59

1 Answers1

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.)"

Ryan Q
  • 10,273
  • 2
  • 34
  • 39
  • It overrides everything inside the element as well. Where with filter i could have done this, `Hi, today you are feeling {{ ':happy_face:' | emoji }}` – Muhammad Umer Jul 06 '16 at 18:24