Html isn't recognizing the tags that Angularjs spitting out [duplicate]

Question

Angular

    $scope.name = "<h1>John Doe</h1>"

HTML

    <div>{{name}}</div>

Outputs:

    <h1>John Doe</h1>

How do I make it so Html recognize the tags that I'm spitting on the page.

Did you even bother to write the full code? Or at least ng-app code? But you are expecting us to find out the issue? — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented May 9, 2016 at 5:27
Sorry thought that were a given. My ctrl is connecting if it outputs the whole string. — VictorLe
– VictorLe, Commented May 9, 2016 at 5:29

Community · Accepted Answer · 2017-05-23 12:01:03Z

1

The correct way would be:

$scope.name = 'John Doe';

HTML:

<div><h1>{{name}}</h1></div>

I don't know why would you set html tags in your variables if you really really don't need to.

EDIT according to comment:

In the case you need to use html tags in your templates, please see this answer on SO: AngularJS : Insert HTML into view

I'm not going to duplicate the answer because it's explained very well in that answer.

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered May 9, 2016 at 5:29

thepio

6,2635 gold badges38 silver badges55 bronze badges

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

4 Comments

VictorLe Over a year ago

I was grabbing it from the database. So the data included the html tags

thepio Over a year ago

Ok, in that case please see my updated answer.

VictorLe Over a year ago

Thank you so much it works now. I thought i was going crazy that I couldn't figure this out.. lmfao.

thepio Over a year ago

Hehe, no problem. Glad to help!

uglycode · Accepted Answer · 2016-05-09 05:28:23Z

1

Try this

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

answered May 9, 2016 at 5:28

uglycode

3,0927 gold badges33 silver badges58 bronze badges

Comments

byteC0de · Accepted Answer · 2016-05-09 05:28:15Z

0

Try This

<div ng-if="name" ng-bind-html="name"></div>

answered May 9, 2016 at 5:28

byteC0de

5,3436 gold badges36 silver badges68 bronze badges

1 Comment

VictorLe Over a year ago

It doesn't spit out anything on the screen with this method

Mia · Accepted Answer · 2016-05-09 05:30:56Z

0

<b>
$scope.renderHtml = function(html_code)
{
    return $sce.trustAsHtml(html_code);
};
HTML:

<p ng-bind-html="renderHtml(value.button)"></p></b>

answered May 9, 2016 at 5:30

Mia

295 bronze badges

Collectives™ on Stack Overflow

Html isn't recognizing the tags that Angularjs spitting out [duplicate]

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

Comments

Linked

Related