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. http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe — Naveed, Sep 12 '13 at 18:40

score 6 · Answer 1 · answered Sep 13 '13 at 05:32

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 '13 at 05:32

AlwaysALearner

43,341
9
94
78

score 2 · Answer 2 · answered Sep 12 '13 at 18:39

2

You can use ng-bind-html-unsafe:

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

answered Sep 12 '13 at 18:39

zs2020

53,359
28
151
216

2

Note: this will not work in Angular 1.2+ It has been replaced with Strict Contextual Escaping. See http://docs.angularjs.org/api/ng.$sce – TheSharpieOne Sep 12 '13 at 18:45

angular variable generating html

2 Answers2

Linked