使用AngularJS在HTML中显示Unicode？

Question

我在使用AngularJS控制器在HTML中显示Unicode时遇到问题.这是我的JavaScript:

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

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

这是我的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>

我试过$sanitise()和trustAsHtml,但没有成功.那么,如何在HTML中显示Unicode 向下箭头？

Answer 1

避免从脚本编写HTML标记.只要数据可能包含HTML特殊字符<,&您就会遇到破损和潜在的安全问题(XSS).

HTML标记引用的字符↓是U + 2193向下箭头.您可以使用JS字符串文字转义直接在JavaScript中引用它:

'name': '\u2193NASDAQ',

或者,如果您的页面/脚本始终保存并以Unicode安全格式(例如UTF-8)提供,那么您根本不需要将其转义:

'name': '?NASDAQ',

Answer 2

具有严格上下文转义的角船.因此,您必须明确表示要将某些字符呈现为HTML.

注意,我还在ng-sanitize外部资源中添加了.

我创建了一个新的过滤器

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

并在视图中使用它像这样:

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

http://jsfiddle.net/9UdVY/