AngularJS: html special characters are not showing

Question

I'm trying to display a string in my model that contains the html representation of a special character. Unfortunately, it doesn't show that actual character, and I don't know how to make it do it...

this is the code:

<div ng-controller="MyCtrl">
  Hello, {{namea}}!
    <br/>
    &lt;
</div>

<script>
var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.namea = 'Superhero &lt;';
}
</script>

this is the output:

Hello, Superhero &lt;! 
<

here is a jsfiddle for that

possible duplicate of parse html inside ng-bind using angularJS — Stewie
– Stewie, Commented Jun 22, 2013 at 14:45

Lindsey · Accepted Answer · 2014-09-17 22:42:45Z

19

I ran into this problem today. Using AngularJS, in data inside a controller, I was trying to include a string with 'n' with tilde. I tried "Español" as well as the html representation, and neither displayed the desired output.

A coworker helpfully pointed out that unicode works. So I tried

{
name : "my site en Espan\u00F1ol"
}

which gave me

my site en Español

as desired. Check out http://unicode-table.com/en/

answered Sep 17, 2014 at 22:42

Lindsey

1912 silver badges3 bronze badges

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

2 Comments

user1664043 Over a year ago

I'm new to angular, but what I don't get is that if it's on a page that's already in utf8 encoding, why is the html encoding even happening? ñ is a legal character in that environment and even latin 1; it's not an html syntax character like &, <, or >. It's not even "dicey" like ' or ". So why is angular mucking with it and is there a way to make it stop?

forgivenson Over a year ago

This is by far the better answer. Thank you so much.

Elias Dorneles · Accepted Answer · 2013-06-22 14:50:55Z

7

You can use ng-bind-html-unsafe directive:

<div ng-controller="MyCtrl" ng-bind-html-unsafe="'Hello,' + namea">
</div>

Check out the examples in the docs and the jsfiddle.

answered Jun 22, 2013 at 14:50

Elias Dorneles

24.2k12 gold badges91 silver badges112 bronze badges

1 Comment

Julien Boulay Over a year ago

With newer version of angular, ng-bind-html-unsafe doesn't exists anymore. You will need to use ng-bind-html in your html template and $sce.trustAsHtml('Superhero <) in the js function

Collectives™ on Stack Overflow

AngularJS: html special characters are not showing

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related