javascript - 向函数返回的数据添加样式

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 直接注入(inject)返回值:

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

没用，因为这似乎不再被当前的导航员接受(如果错误请纠正我)因为它是 security issue .

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

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

同样不行:

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

这会返回一个空函数异常。

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

TL;DR:我想要达到什么目的？

这里的绿色文字:

代表一个单元格。数据不是直接传递的，而是通过一系列函数和ng-repeats动态生成的。

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

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>