CODEWITHSUNDEEP
angularjs
Moshe Shaham
Moshe Shaham

Reputation: 15974

AngularJS: html special characters are not showing

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

Upvotes: 7

Views: 25021

Answers (2)

Lindsey
Lindsey

Reputation: 191

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/

Upvotes: 19

Elias Dorneles
Elias Dorneles

Reputation: 23796

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.

Upvotes: 7

Related Questions