What is the way to encode json template to html with angularJS?

Question

I'm a beginner in AngularJS and I try to render a json in html with angularJS but html tags are not encoded. Is there a way to do that with an angularJS method ?

My HTML:

<p>{{template.title}}</p>

My JSON:

{
    "title":"try a <br> to break line"
}

My JS:

$http.get(JSON).success(function (data) {
        $scope.template = data;
});

Unfortunately, the render display the br tag

What version of AngularJS are you using? It is important as 1.2+ differs from <1.2 — TheSharpieOne
– TheSharpieOne, Commented Sep 27, 2013 at 19:19

Fourth · Accepted Answer · 2013-09-27 19:34:18Z

2

Angular wants to bind text as text by default.

In Angular <1.2.0 you need to bind the html unsafe (this can be dangerous):

<h1 ng-bind-html-unsafe="title"></h1>

In Angular 1.2.0 you need to bind the html:

<h1 ng-bind-html="title"></h1>

Dont forget to include ngSanitize to keep your server safe.

Overall, I recommend using Angular 1.2.0 rc2 or later versions as the ngSanitize will keep you safe.

edited Sep 27, 2013 at 19:34

answered Sep 27, 2013 at 19:18

Fourth

9,3811 gold badge25 silver badges30 bronze badges

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

5 Comments

user2487815 Over a year ago

I use 1.0.7 version, with ng-bind-html-unsafe, it seems to work but my content appears empty now :-(

Fourth Over a year ago

Make sure that you are binding the right scope variable. I just used what I thought your's might be in my example.

user2487815 Over a year ago

You're right. I used ng-bind-html-unsafe="title". But it works fine with ng-bind-html-unsafe="template.title", thank you very much guy. Now I have to see how ngSanitize works. thx!

Fourth Over a year ago

ngSanitize is new in Angular 1.2.0. Like I said, if you can get by using it until they release it stable, its a nice upgrade over the 1.0 feature set.

user2487815 Over a year ago

Thank you, I hope to can do the upgrade to developp when everything will be stable in my web-app at the current time.

Collectives™ on Stack Overflow

What is the way to encode json template to html with angularJS?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related