AngularJS Automatically HTML Encoding Ampersands

Question

I've got a comments section on my site where I save htmlencoded comments in my database. So I added this comment-

"testing" `quotes` \and backslashes\ <b>and html</b>

and it saved in the database as-

&quot;testing&quot; &#039;quotes&#039; \and backslashes\ &lt;b&gt;and html&lt;/b&gt;

All good but when I print it to my page

<li class="media" ng-repeat="comment in comments">
    <a class="pull-left" href="#">
      <img class="media-object" src="/{{comment.thumb}}" width="24" alt="{{comment.username}}">
    </a>
    <div class="media-body">
      <h5 style='margin: 0px;'><a href="/profile/{{comment.username}}">{{comment.username}}</a></h5>
      <p>{{comment.message}}</p>
    </div>
</li>

The ampersands are automatically changed to

&amp;

So the resulting string on the page will be-

&amp;quot;testing&amp;quot; &amp;#039;quotes&amp;#039; \and backslashes\ &amp;lt;b&amp;gt;and html&amp;lt;/b&amp;gt;

Of course this won't show properly. I tried passing the commented to a parseAmper filter that replaces all encoded ampersands with & but it doesn't stick. How can I print ampersands properly?

Minko Gechev · Accepted Answer · 2014-01-26 22:06:43Z

3

You can use:

HTML

<body ng-app="demo" ng-controller="MainCtrl">
  <span ng-bind-html="foo"></span>
</body>

JavaScript

angular.module('demo', []);

var demo = angular.module('demo').controller('MainCtrl', function ($scope, $sce) {
  $scope.foo = $sce.trustAsHtml('&quot;testing&quot; &#039;quotes&#039; \and backslashes\ &lt;b&gt;and html&lt;/b&gt;');
});

And here is a demo.

answered Jan 26, 2014 at 22:06

Minko Gechev

25.8k9 gold badges64 silver badges69 bronze badges

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

Collectives™ on Stack Overflow

AngularJS Automatically HTML Encoding Ampersands

1 Answer 1

HTML

JavaScript

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

HTML

JavaScript

Comments

Your Answer

Sign up or log in

Post as a guest

Related