ng-bind-html-unsafe not parsing html in angularjs

Question

I'm having a bit of an odd time with angular not parsing HTML supplied for in JSON. I am using the ng-bind-html-unsafe directive which takes the string from the JSON and outputs it onto the page, but the html is not being parsed by the browser.

I'm using angularjs V1.1.5, but have tried older versions also.

My binding tag looks like this:

<div class="announcement-wrapper" ng-repeat="announcement in announcements" id="{{announcement.announcementId}}">
  <p ng-bind-html-unsafe="announcement.content"></p>
</div>

and the JSON which is feeding the binding is:

{
"userId": "s123456",
"responseCode": "OK",
"responseMessage": "",
"timeStamp": 1371778685560,
"announcements": [
    {
        "announcementId": 1518,
        "title": "Daves second announcement",
        "content": "&lt;p&gt;Announcement for Chad&lt;/p&gt;",
        "releaseDate": "13 June 2013",
        "important": false,
        "read": true
    },
    {
        "announcementId": 1511,
        "title": "Onshore HE and TAFE Announcement",
        "content": "&lt;p&gt;This announcement is only for Onshore HE and TAFE persons onshore.&lt;/p&gt;&lt;p&gt;High Priority.&lt;/p&gt;",
        "releaseDate": "04 June 2013",
        "important": false,
        "read": true
    }
  ]
}

What is happening is that the encoded characters are being produced onto the page, it's just that they are not being parsed by the browser to output as actual paragraph tags. eg. the second announcement is being output onto the page as

<p>This announcement is only for Onshore HE and TAFE persons onshore.</p><p>High Priority.</p>

I've tried using the ng-bind-html directive also and have the sanitize dependency in place and it won't work with either. no doubt it is somethign small, but I just need a fresh pair of eyes to take a look...

Thanks in advance!

Quick note that ng-bind-html-unsafe is not included in release 1.2 — mcranston18
– mcranston18, Commented Dec 17, 2013 at 22:42

callmekatootie · Accepted Answer · 2013-06-21 05:22:35Z

2

That is because you are using < and > to denote the opening and closing of brackets.

They will literally be used as less than and greater than symbols instead of opening and closing tags.

You need to replace the announcements.content with less than and greater than symbols as follows:

...
"content": "<p>Announcement for Chad</p>",
...

EDIT: See this list of all the HTML codes possible. You are using the HTML code for "<" and ">" and thus instead of opening and closing the tags, you get that character.

answered Jun 21, 2013 at 5:22

callmekatootie

11.2k16 gold badges73 silver badges109 bronze badges

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

2 Comments

Hugh Law Over a year ago

Thanks for that. The reason the characters are encoded is to prevent the JSON breaking with " characters, but we should be able to just escape those and all will work then.

John Bower Over a year ago

Thank you. It sounds bizarre but I sort of knew that was the problem, I just couldn't make it make logical sense in my head. After reading this I realized that I needed to do some String replacing before using ng-bind-html.

Collectives™ on Stack Overflow

ng-bind-html-unsafe not parsing html in angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related