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!

Answer 1

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>