【问题标题】：How can I insert an ng directive in dynamic HTML?如何在动态 HTML 中插入 ng 指令？
【发布时间】：2017-09-24 13:59:59
【问题描述】：

我正在使用标记标签来突出显示动态创建的 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> 的样式：

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

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

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

但是当我这样做时，标记的文本会恢复为默认的<mark> 系统突出显示，忽略我的标记样式和我的markSelected 样式。

【问题讨论】：

标签： html angularjs ng-class

【解决方案1】：

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

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

【讨论】：

&lt;mark&gt; 和 ng-class 不兼容吗？

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