I'm using the mark tag to highlight text in dynamically created HTML. I want to use one of two styles depending on a condition.
I am able to specify a CSS class this way:
<mark class='selected'>
But if I change this to use ng-class (without even adding my condition yet)...
<mark ng-class='selected'>
... the highlighting defaults back to the mark tag's default style and does not use my 'selected' class.
Are <mark> and ng-class incompatible?
Edit: Here's the code which hopefully will help clarify the issue.
In my MVC controller I query the database and receive text. I replace certain characters in the text with the mark tags to highlight the items the database has identified need to be highlighted, e.g.
fieldText = fieldText.Replace("\u0002","<mark>");
fieldText = fieldText.Replace("\u0003","</mark>");
This becomes part of the model passed to the template, which uses ng-bind-html to tie it to a span:
<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>
My CSS defines the style for <mark>:
mark {
background-color: yellow;
color: black;
padding: 0px;
text-decoration:underline;
font-weight: bold;
}
This works as far as it goes. But when the condition specified in the <span> tag shown above is true, I need to change the style of the <mark> text (and not to the same style as the rest of the span). So I'm trying to define the text in the MVC code to set the style conditionally:
fieldText = fieldText.Replace("\u0002","<mark ng-class=\"{'markSelected': $ctrl.isSelected(field.ID, $ctrl.fieldId)}\">");
But when I do this, the marked text reverts to the default <mark> system highlighting, ignoring both my mark style and my markSelected style.
