current community

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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!

share|improve this question
 
Quick note that ng-bind-html-unsafe is not included in release 1.2 –  mcranston18 Dec 17 '13 at 22:42
add comment

1 Answer

up vote 1 down vote accepted

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.

share|improve this answer
 
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. –  hlaw Jun 24 '13 at 1:33
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.