javascript - 如何使用angularjs在CSS伪元素中显示HTML字符实体

Question

我正在尝试将 HTML 字符实体输出为数据属性，以便我可以使用 css 伪元素按我希望的方式显示它。

当我们在 HTML 中直接分配属性的值时，这是有效的，但当我们使用 angular 绑定(bind)值时则无效。

示例代码如下:

var app = angular.module('test', []);
app.config(function($sceProvider) {
  // Completely disable SCE.  For demonstration purposes only!
  // Do not use in new projects.
  $sceProvider.enabled(false);
});
app.controller('testCtrl', ['$scope',
  function($scope) {
    $scope.symbol = "\00a9";
    $scope.symbol1 = "©";
  }
])

.copy::before {
  content: attr(data-symbol);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testCtrl">
  <div class="copy" data-symbol="&copy;">working</div>

  <div class="copy" data-symbol="{{symbol}}">not working</div>
  <div class="copy" data-symbol="{{symbol1}}">also not working</div>
</div>

如您所见，我也尝试完全禁用 $sce(出于测试目的)。但这也没有用。

应用程序中将有太多这些符号，因此为每个符号生成一个 DOM 元素似乎不是一个好主意。

有办法做到这一点吗？

Answer 1

部分问题在于 AngularJS 会自动转义要在 HTML 中呈现的字符序列。例如字符串“©”中的字符“&”被转义为“&”，从而产生文本“©”在 HTML 中呈现为“©”而不是所需的“©”。

长话短说，要从 Angular 文件中呈现特定字符，我们不使用 HTML 实体，而只是使用字符本身。在这种情况下，只要使用 UTF-8 编码，JavaScript 文件中的字符“©”就完全有效。所以我们可以将罪魁祸首行重写为

$scope.symbol = "©";

如果需要只使用 ASCII 字符，我们使用 JavaScript 转义序列来达到目的，例如

$scope.symbol = "\u00a9";

“\u”部分后的4个字符是Unicode字符编码的十六进制表示，这里169为版权标志。可在此处进行搜索:http://www.fileformat.info/info/unicode/char/search.htm

如果我们有字符，在 JavaScript 中获得相同序列的另一种方法是:

"©".charCodeAt(0).toString(16)

然后用零填充结果。