How to render special characters like ™ in HTML with Angular JS

Question

I have some special characters to show in various screens of my application so i wanted to have some way where i can handle special characters like "special char - æ  &amp" in controller/service instead of HTML.

I know i can use

ng-bind-html

to show special characters for the example string above. However i need to show same string in multiple screens so it would make more sense for me to do it in JS. Any alternative or equivalent JS side snippet for ng-bind-html?

Note: If you have come across these kind of strings you might be knowing that they can be rendered directly with HTML but if you are using Angular JS with

{{some scope value}}

then it doesn't format special characters on it's own.

Why don't you want to use ng-bing-html? I think you would get better help if you describe what you're trying to accomplish in more detail, maybe create a plunkr or codepen? stackoverflow.com/questions/26064309/… — Anony372
– Anony372, Commented May 15, 2017 at 17:57
It's not a string with special characters. It's simply a string that contains HTML and if you want to bind HTML to the DOM then you have to use ng-bind-html. I know it's a pain, but what you have there is a string with markup and for security reasons you need to use Angular's preferred methods for handling HTML content. — Reactgular
– Reactgular, Commented May 15, 2017 at 17:57
@ThinkingMedia Doesn't Angular provides any other way than ng-bind-html which can be used for these kind of characters? — Mayukh Raaj
– Mayukh Raaj, Commented May 15, 2017 at 18:00
@Ericson578 I was looking for some other way as i didn't want to go and change in 15-20 html files for the same kind of characters — Mayukh Raaj
– Mayukh Raaj, Commented May 15, 2017 at 18:01
@MayukhRaaj have you tried using the Unicode alternative to those characters? You're using HTML syntax which is the source of your problem. Try using Unicode and if that works you could write a filter to rewrite such characters to Unicode. — Reactgular
– Reactgular, Commented May 15, 2017 at 18:08

bamtheboozle · Accepted Answer · 2017-05-15 18:14:28Z

2

You can use $sce like so:

function myCtrl($scope,$sce){
    $scope.html = $sce.trustAsHtml('HTML_CODE;');
}

And then in your HTML you use ng-bind-html to bind the content to an element.

<span ng-bind-html="html"></span>

edited May 15, 2017 at 18:14

answered May 15, 2017 at 18:05

bamtheboozle

6,5162 gold badges21 silver badges33 bronze badges

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

4 Comments

Reactgular Over a year ago

Don't you still have to use ng-bind-html even if you mark it as trusted?

bamtheboozle Over a year ago

You do, but he said he didn't want to handle special characters in HTML. I assume that by building the content in JS it solves his problem.

Mayukh Raaj Over a year ago

It won't solve the problem as you still have to do the same ng-bind-html stuff in your htmls

Luke Briggs Over a year ago

If this is for e.g. displaying a name like "André" then be aware that this approach may open you up to XSS attacks. Just use UTF8 and let angular continue to make HTML safe again.

Collectives™ on Stack Overflow

How to render special characters like ™ in HTML with Angular JS

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related