动态更改 CSS Unicode 内容属性答案

【问题标题】：Changing CSS Unicode Content Property Dynamically动态更改 CSS Unicode 内容属性
【发布时间】：2017-09-21 17:57:46
【问题描述】：

我正在 div 标签中设置背景，它是表格每一行中的字体真棒图标。此图标取决于正在显示的对象。我尝试设置类似于Changing CSS content property dynamically 的代码。但是，我的数据内容将是 unicode。我在角度控制器中分配值如下：

if (type) {
    if (type.image.includes('fa-hand-o-up')) {
        type.background = '\f0a6';
    } else if (type.image.includes('fa-wrench')) {
        type.background = '\f0ad';
    } else if (type.image.includes('fa-star')) {
        type.background = '\f005';
    }            
    return type;
}

然后将它们包括在表格中，如下所示：

<td>
    <div class="text-center type-wrapper" 
         data-content="{{::dataItem.type.background}}">
        <span class="bold">{{::dataItem.type.name}}</span>
    </div>
</td>

但是，这只是将 0a6、0ad 和 005 作为背景“图像”。有没有办法动态添加 unicode 内容，或者 attr(data-xxx) 仅用于纯文本？

另外，我尝试为颜色添加 attr(data-color)，但这似乎也不起作用。这也是因为我使用的是十六进制代码而不是纯文本吗？

【问题讨论】：

stackoverflow.com/questions/36197443/…
所描述的方法确实有效，但不适用于 AngularJS。它们的问题是您需要将值硬编码到 HTML 中的 data-content 属性中。我需要使用 Angular 进行动态处理。经过一番调查，我需要某种 ng-xxx 属性来添加到页面中。据说你可以使用一个 ng-attr-xxx，但我无法让它工作。还有一个 ng 样式，但您需要在某个地方构建样式，然后在控制器中混合样式比我想要的更多。

标签： css css-content

【解决方案1】：

^{如果我没看错你的问题...}
尝试使用&#x 引用前缀

span:before{
  content: attr(data-content);
}

&lt;span data-content="&amp;#x00ff;"&gt;&lt;/span&gt;

引用以&# 开头，以; 结尾，x 表示使用的是十六进制值。

【讨论】：

如果我能够对 HTML 进行硬编码，那就可以了。但是，我在 ng-repeat 中运行它，内容取决于该记录的 dataItem.type。对于 Angular，似乎只能使用 ng-xxx 来获取动态属性。

【解决方案2】：

这对我有用：https://stackoverflow.com/a/26025865/2077405

以这种格式插入，使用 Javascript 中的 \u 表示字符串文字中的 Unicode 数字
$("a").attr ("data-content", "\u25BC");

【讨论】：