如何将换行符从JSON渲染到HTML

Question

I am trying to build a testimonial website with AngularJS 1.1.5 and PHP

I have an array of JSON objects consisting of Name, Message and Date.

The real testimonial will be the attribute Message and there will be line breaks in the testimonial.

[
{
    "Name": "Snow White",
    "Message": "Dear all, I need a new line <br> Is it possible to do it in AngularJS?",
    "Date": "16/11/2013"
},
{
    "Name": "Cinderalla",
    "Message": "Dear all, I need a new line <br> Is it possible to do it in AngularJS?",
    "Date": "10/11/2013"
},
{
    "Name": "Ariel",
    "Message": "Dear all, I need a new line <br> Is it possible to do it in AngularJS?",
    "Date": "20/06/2013"
}
]

After using $resource to get the array and link it to $scope.Ctestimonials, I used ng-repeat to render all the objects onto HTMl.

<div id="testimonialbody" ng-controller="TestimonialCtrl">
<ul class="testimonialul">
<li ng-repeat="testimonial in Ctestimonials" class="testimonialclass">
<blockquote> {{testimonial.Message}}
</blockquote>
<cite>{{testimonial.Name}}, {{testimonial.Date}}</cite>
</li>
</ul>
</div>

However, I could not get the line breaks to render correctly in the html page. Does anyone know how can I do it?

Thank you

Answer 1

Try this:

JSON.stringify({{testimonial.Name}},null,'\t')
    .replace(/\n/g,'<br />')
    .replace(/\t/g,'&nbsp;&nbsp;&nbsp;');

Answer 2

As epascarello said, ngBindHtml handles this nicely. I'm not sure where it stood in 1.1.5, but it uses the $santize service to handle escaping. Per the docs, if $santize isn't available, it throws an exception rather than allowing an exploit.