I have an HTML encoded string like this:
Sign up and get <span class="strong">Something for FREE!</span>
When I use ngSanitize and ng-bind-html in my template like this:
<p ng-bind-html="someText"></p>
I get back the HTML decoded string:
Sign up and get <span class="strong">Something for Free!</span>
But it literally shows the HTML decoded string in browser, instead of rendering the HTML correctly.
How can I have it render the correct HTML in the DOM?
You can decode the html string first. Here's a working plunker example.
** Decode function taken from this answer.
That's a great answer. Building on that, you can reuse it greatly as a filter instead:
Then use it like this:
This becomes very usable when you have 3rd party scripts (let's say, an image gallery), and you have to pass data to it by html data-* attributes. The only way of doing it is by using filter.
Hope this helps someone :)