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

【问题标题】：How to display HTML character Entities in CSS pseudo elements with angularjs如何使用 angularjs 在 CSS 伪元素中显示 HTML 字符实体
【发布时间】：2020-05-09 00:33:52
【问题描述】：

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

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

下面是示例代码：

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;";
  }
])

.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 元素似乎不是一个好主意。

有没有办法做到这一点..？

【问题讨论】：

将是一个简单的指令插入为 html ......为什么这不是一个好主意？
@GOTO0 \00a9 是 brajeshwar.github.io/entities 的 css 等效项
@GOTO0 "\u00a9" 似乎是unicode sequence for c/c++/java 但确实有效...您能否发布一个答案并附上参考在哪里可以找到这些...？！

标签： javascript html css angularjs

【解决方案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)

然后用零填充结果。

【讨论】：

非常感谢。节省了我很多时间