angular variable generating html

Question

i am trying to make a blog page with angularJS and on the message part i have a div like this.

<div class="post-content">
    {{jsonPost.message}}
</div>

and inside the variable jsonPost.message i got a string like this

<p>paragraph 1</p>
<p>paragraph 2</p>

but instead creating 2 html paragraphs, instead i see the <p> texts on the screen aswell like a text. Is there a way to make them html code ? and than target them via css. Thank you, Daniel!

Have you tried using ngBindHtmlUnsafe? Take a look at this, I haven't used it yet so I am not posting it as an answer. docs-angularjs-org-dev.appspot.com/api/… — Naveed
– Naveed, Commented Sep 12, 2013 at 18:40

AlwaysALearner · Accepted Answer · 2013-09-13 05:32:48Z

6

Since you are using v1.2, you need to use ng-bind-html. To bypass sanitization use $sce service:

$scope.jsonPost.message = $sce.trustAsHtml("<p>paragraph 1</p>");

HTML:

<!-- bypasses sanitizaton -->
<div data-ng-bind-html="jsonPost.message"></div>

answered Sep 13, 2013 at 5:32

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

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

Comments

zs2020 · Accepted Answer · 2013-09-12 18:39:29Z

2

You can use ng-bind-html-unsafe:

<div class="post-content" ng-bind-html-unsafe="jsonPost.message"></div>

answered Sep 12, 2013 at 18:39

zs2020

54.6k30 gold badges157 silver badges223 bronze badges

1 Comment

TheSharpieOne Over a year ago

Note: this will not work in Angular 1.2+ It has been replaced with Strict Contextual Escaping. See docs.angularjs.org/api/ng.$sce

Collectives™ on Stack Overflow

angular variable generating html

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related