CODEWITHSUNDEEP
angularjs
Hugh Law
Hugh Law

Reputation: 33

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

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!

Upvotes: 0

Views: 2153

Answers (1)

callmekatootie
callmekatootie

Reputation: 11228

That is because you are using &lt; and &gt; 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.

Upvotes: 2

Related Questions