Question

我正在尝试将CSS样式添加到在Javascript中计算的字符串中。它经历了一系列转换函数：

var fieldSetTransformation = setFieldTransformation(iteration);
fieldSetTransformation = stylePropertyName(fieldSetTransformation);

然后通过AngularJS的ng-repeat将该值传递给指令中生成的表：

<tbody class="tableBody">
    <tr ng-repeat="line in linesArray">
        <td ng-repeat="column in ::columns" width="{{::column.width}}" ng-class="{
          'center-text' : (!line[column.key] || line[column.key].length === 0)
        }">{{line[column.key] !== undefined ? line[column.key] : '--'}}<span ng-if="column.key == 'user'">
                        <i id="plus-icon-styling"
                        class="fa fa-plus-circle action-icon">
                        </i>
                    </span>
        </td>
    </tr>
</tbody>

所以我很难将它附加到现有容器中。

到目前为止我尝试了什么？

将HTML直接注入返回的值：

var htmledField = [
  '<span class="propertyNameHighlight">' + fieldSetTransformation,
  '<span>'].join("\n");
];

没用，因为当前导航员似乎不再接受这一点（如果错误则纠正我），因为它是security issue。

抛出的结果只是<span class="propertyNameHighlight">000000</span> 出现在表格中。

创建元素，然后将其附加到视图中

也是禁忌：

function stylePropertyName(data){
  var newSpan = document.createElement('span');
  newSpan.setAttribute('class', 'propertyNameHighlight');
  document.getElementsByClassName("tableBody").appendChild(newSpan);
  newSpan.innerHTML = data;
  return data;
}

返回null函数异常。

我还检查了this问题，这个问题似乎与我的查询最接近，但在我的情况下，没有明确的容器也没有包装结果字符串。

TL; DR：我想要实现的目标是什么？

此处的绿色文字：

代表一个细胞。数据不直接传递，它是通过一系列函数和ng重复动态生成的。

非常感谢我能得到的任何帮助或相关的无视问题。谢谢！

Answer 1

根据评论者Stanislav Kvitash的建议（谢谢！），我使用ngBindHtml解决了这个问题：

<tbody class="tableBody">
    <tr ng-repeat="line in linesArray">
        <td ng-repeat="column in ::columns" width="{{::column.width}}" ng-class="{'center-text' : (!line[column.key] || line[column.key].length === 0)}">
            <span ng-bind-html="line[column.key] !== undefined ? line[column.key] : '--'"></span>
            <span ng-if="column.key == 'user'">
              <i id="plus-icon-styling"
               class="fa fa-plus-circle action-icon">
              </i>
           </span>
        </td>
    </tr>
</tbody>

为函数返回的数据添加样式

1 个答案: