Display Unicode in HTML with AngularJS?

Question

I am having a problem displaying Unicode in HTML from an AngularJS controller. Here is my JavaScript:

var mOverview = angular.module('mOverview', []);

mOverview.controller('mOverviewController', function ($scope, $sce) {
  $scope.mData = [
    {
        'name': '&darr;'+'NASDAQ', // here the unicode is &darr; but the output is also &darr; which is supposed to be a down-arrow
        'amount': '15,698.85',
        'upDown': '+105.84'
        }
    ];
});

And here is my HTML:

<div ng-app="mOverview">
  <div ng-controller="mOverviewController">
    <table>
      <tr>
        <th></th>
        <th></th>
        <th></th>
      </tr>
      <tr ng-repeat="md in mData">
        <td>{{md.name}}</td>
        <td>{{md.amount}}</td>
        <td>{{md.upDown}}</td>
      </tr>
    </table>
 </div>

I tried $sanitise() and trustAsHtml but without success. So, how can I display the Unicode Downwards Arrow in my HTML?

bobince · Accepted Answer · 2014-04-23 11:16:08Z

18

Avoid writing HTML markup from script. As soon as the data may content HTML-special characters like < and & you've got breakage and potentially security issues (XSS).

The character referred to by the HTML markup ↓ is U+2193 Downwards Arrow. You can refer to it directly in JavaScript using a JS string literal escape:

'name': '\u2193NASDAQ',

Or if your page/script is consistently saved and served in a Unicode-safe format (eg UTF-8) then you don't need to escape it at all:

'name': '↓NASDAQ',

answered Apr 23, 2014 at 11:16

bobince

538k111 gold badges675 silver badges846 bronze badges

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

1 Comment

Bastian Over a year ago

This answer should definitely receive more upvotes since it is way lighter in terms of runtime overhead and code necessary for the implementation (although unicode character numbers might not be as comprehensible at first sight...).

javaCity · Accepted Answer · 2014-04-22 21:50:02Z

11

Angular ships with Strict Contextual Escaping. So you'd have to explicitly say that you want to render some character as HTML.

Notice, I have also added ng-sanitize in the External Resources.

I created a new filter

mOverview.filter('unsafe', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
});

and used it in view like this:

<td ng-bind-html="md.name | unsafe"></td>

http://jsfiddle.net/9UdVY/

answered Apr 22, 2014 at 21:50

javaCity

4,3282 gold badges27 silver badges37 bronze badges

1 Comment

MaxRocket Over a year ago

Thanks, I have been pulling out my hair! Note to those who follow: it seems to work only with ng-bind-html, not {{ }} binding

Collectives™ on Stack Overflow

Display Unicode in HTML with AngularJS?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related