how to bind html in angular v1.2

Question

I was trying to make a blog in angularJS and on the post message section I want to get the message from json and add it to a content div like this

<div class="content">
    {{json.message}}
</div>

Now my div has a paragraph in it, it's practically a html code like this

<p>this is my message</p>

but when i do this, i see on the screen this

<p>this is my message</p>

as text. I understand in previous versions i could use ng-bind-html-unsafe but i am using v1.2 of angularJS. Can anyone please show me code similar to ng-bind-html-unsafe so that I can make this work in v1.2? Thank you, Daniel!

Well I'll be damned bing has been used as a verb. Perhaps you meant bind? — VoronoiPotato
– VoronoiPotato, Commented Sep 12, 2013 at 20:39

TheSharpieOne · Accepted Answer · 2013-09-12 20:53:38Z

6

You can use the Strict Contextual Escaping services ($sce) in 1.2

Controller:

function myCtrl($scope,$sce) {
    $scope.myHtml = $sce.trustAsHtml('<span>Hello World!</span>');
}

Template:

<div ng-app ng-controller="myCtrl">
    <div ng-bind-html="myHtml"></div>
</div>

Example: http://jsfiddle.net/TheSharpieOne/GKnrE/1/

answered Sep 12, 2013 at 20:53

TheSharpieOne

25.7k9 gold badges72 silver badges80 bronze badges

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

1 Comment

Pacuraru Daniel Over a year ago

thank you very much, this works perefect! also thank you @Problematic

Problematic · Accepted Answer · 2013-09-12 20:53:01Z

4

You'll need to inject and use the $sce service to mark it as trusted HTML, then use the ng-bind-html directive (plunkr):

app.js:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $sce) {
  $scope.name = $sce.trustAsHtml('<p>Hello World</p>');
});

index.html:

<body ng-controller="MainCtrl">
    <div class="content" ng-bind-html="name"></div>
</body>

answered Sep 12, 2013 at 20:53

Problematic

17.7k10 gold badges76 silver badges86 bronze badges

Collectives™ on Stack Overflow

how to bind html in angular v1.2

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related