1

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.

Aravind
  • 40,391
  • 16
  • 91
  • 110
Mayukh Raaj
  • 403
  • 2
  • 7
  • 19
  • 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? http://stackoverflow.com/questions/26064309/decode-html-entity-in-angular-js – Anony372 May 15 '17 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 May 15 '17 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 May 15 '17 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 May 15 '17 at 18:01
  • I would refactor that code to use ng-bind-html, but if you absolutely do not want to do that you could use a controller to compile the html and attach it to the DOM wherever it's needed. But that is more complicated than just refactoring. https://docs.angularjs.org/api/ng/service/$compile – Anony372 May 15 '17 at 18:03
  • 3
    @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 May 15 '17 at 18:08
  • multiple screens is not a constraint. are you using templates? insert ng-bind-html there. – sbharti May 15 '17 at 18:08

1 Answers1

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>
bamtheboozle
  • 5,847
  • 2
  • 17
  • 31
  • Don't you still have to use ng-bind-html even if you mark it as trusted? – Reactgular May 15 '17 at 18:09
  • 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. – bamtheboozle May 15 '17 at 18:14
  • It won't solve the problem as you still have to do the same ng-bind-html stuff in your htmls – Mayukh Raaj May 15 '17 at 18:16
  • 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_. – Luke Briggs May 15 '17 at 18:16