如何在动态HTML中插入ng指令？

Question

我正在使用mark标记突出显示动态创建的HTML中的文本。我想根据条件使用两种风格中的一种。

我可以这样指定一个CSS类：

<mark class='selected'>

但如果我改变这个以使用ng-class（甚至没有添加我的条件）......

<mark ng-class='selected'>

...突出显示默认返回标记标记的默认样式，不使用我的“选定”类。

<mark>和ng-class不兼容吗？

编辑：这是希望有助于澄清问题的代码。

在我的MVC控制器中，我查询数据库并接收文本。我用文本标签替换文本中的某些字符，以突出显示数据库识别出需要突出显示的项目，例如。

fieldText = fieldText.Replace("\u0002","<mark>");
fieldText = fieldText.Replace("\u0003","</mark>");

这成为传递给模板的模型的一部分，模板使用ng-bind-html将其绑定到跨度：

<span ng-class="{'selectedField': field.ID.startsWith($ctrl.fieldId) ||  $ctrl.fieldId == 'Type' + $ctrl.row.TxType}" id="field.ID" ng-click="$ctrl.elementClicked(field.ID)" ng-bind-html="$ctrl.format(field)"></span>

我的CSS定义了< mark＆gt;的样式：

 mark {
     background-color: yellow;
     color: black;
     padding: 0px;
     text-decoration:underline;
     font-weight: bold;
 }

这就可以了。但是当< span＆gt;中指定的条件时上面显示的标签是真的，我需要更改<标记＆gt;的样式文本（而不是与跨度的其余部分相同的样式）。所以我试图在MVC代码中定义文本以有条件地设置样式：

fieldText = fieldText.Replace("\u0002","<mark ng-class=\"{'markSelected': $ctrl.isSelected(field.ID, $ctrl.fieldId)}\">");

但是当我这样做时，标记的文字将恢复为默认的<标记＆gt;系统突出显示，忽略我的标记样式和我的markSelected样式。

Answer 1

ng-class是一个需要表达式的指令。如果你想总是使用同一个类，你可以做类似的事情

<mark ng-class="value = 'selected'">