Angular bind html from Html entities

Question

How to encode a HTML entities and display the HTML ? I have attached sample fiddle along this ticket

Controller:-

angular.module('myapp', ['ngSanitize'])
.controller('foo', function($scope) {
    $scope.bar = "&lt;p&gt;&lt;b&gt;Lorem Ipsum&lt;/b&gt; &lt;br /&gt;There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.or randomised words which don't look even slightly believable.&lt;/p&gt;&lt;p&gt;&lt;b&gt;Rooms&lt;/b&gt; &lt;br /&gt";
});

angular.bootstrap(document, ['myapp']);

HTML :-

<div ng-controller="foo">

    <div ng-bind-html="bar"></div>

</div>

Output :-

<p><b>Lorem Ipsum</b> <br />There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.or randomised words which don't look even slightly believable.</p><p><b>Rooms</b> <br />

Expected output :-

Lorem Ipsum

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.or randomised words which don't look even slightly believable.

Rooms

Sample Js fiddle :- http://jsfiddle.net/68n89rj3/

Why can't you use <>' rather than '<' and >` ?

Tejinder Singh
– Tejinder Singh

2017-07-20 11:12:11 +00:00
Commented Jul 20, 2017 at 11:12 — Tejinder Singh
– Tejinder Singh, Commented Jul 20, 2017 at 11:12
@TejinderSingh Actually that data came from backend

Deepak raj
– Deepak raj

2017-07-20 12:35:52 +00:00
Commented Jul 20, 2017 at 12:35 — Deepak raj
– Deepak raj, Commented Jul 20, 2017 at 12:35

Nikolaj Dam Larsen · Accepted Answer · 2017-07-20 17:01:57Z

3

It isn't working because your HTML is already encoded, so it just outputs the encoded html characters. What you need is to first decode the HTML before assigning it to the $scope.bar variable.

One way to do it is this:

$scope.bar = angular.element('<div>').html("&lt;p&gt;&lt;b&gt;Lorem Ipsum&lt;/b&gt; &lt;br /&gt;There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.or randomised words which don't look even slightly believable.&lt;/p&gt;&lt;p&gt;&lt;b&gt;Rooms&lt;/b&gt; &lt;br /&gt").text();

It's a bit of a hack, where you first create an unparented div-element (so it only exists in memory), add your string as the html of this element, and finally extract the text. That should work for you.

Adding a filter to do it:

angular.module('app').filter('htmldecode', function(){
    return function(encodedHtml) {
        return angular.element('<div>').html(encodedHtml).text();
    };
});

and use it like this:

<div ng-bind-html="bar | htmldecode"></div>

edited Jul 20, 2017 at 17:01

answered Jul 20, 2017 at 11:19

Nikolaj Dam Larsen

5,7246 gold badges37 silver badges46 bronze badges

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

2 Comments

Deepak raj Over a year ago

It's working fine. IS there is any other solutions is available in HTML file itself?

Nikolaj Dam Larsen Over a year ago

Not really. But you could write a filter to do it for you, although that way it'd be re-decoded each time the element is recompiled by angular. I've included such a filter, although I still recommend you decode this only once, in the controller.

Collectives™ on Stack Overflow

Angular bind html from Html entities

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related