Угловой ng-класс, устанавливающий правильный класс (подтвержденный в источнике страницы), но не будет применять стили

Да... это табличные данные.

Итак, заголовок вопроса объясняет большую часть того, что происходит, но я предоставлю еще несколько подробностей: у меня есть модель на моем контроллере, которая содержит свойства "Имя" и "Ценность" (с возможностями "ХОРОШЕЕ" и "ПЛОХОЕ")

У меня есть 2 класса, определенные в моем SCSS файле, чтобы предоставить стили для "действительных" и "недопустимых" значений.

SCSS псевдо.

&[class *= "Foo"]
{
 color: green;
}
&[class *= "Bar"]
{
 color: red;
}

наценка

<ul ng-controller="thingsController">
 <li ng-repeat="thing in things">
 <table>
 <tbody><tr>
 <td>{{thing.name}}</td>
 <td ng-class="{'Foo' : true}">{{thing.value}}</td>
 </tr>
 </tbody></table>
 </li>
</ul>

Хорошо, поэтому суть этого: если я использую:

{{thing.value}}

он отображает значение с зеленым цветом текста. Если я использую:

{{thing.value}}

он отображает значение с красным цветом текста.

ОДНАКО, Если я использую:

{{thing.value}}

Он отображает значение с черным (по умолчанию) цветным текстом. (То же самое для бара)

Когда я проверяю свой элемент в Chrome Dev Tools, я вижу

GOOD

но если я проверю вкладку стилей, стили внутри Foo не будут применены к моему элементу... это нигде в моем каскаде.

Может кто-нибудь сказать, что с этим?

1 ответ

Я нашел причину. Это связано с использованием селекторов регулярных выражений для построения структуры css блока.

ng-класс, по-видимому, не учитывает "начинается с" css-селектора.

[class ^= "block"]
{
 &[class *= "__element"]
 {
 &[class *= "--modifier"]
 {

 }
 }
}

Мне пришлось изменить исходный [class ^= "block"] на [class *= "block"] который является абсолютным дерьмом... но ng-класс смог сделать то, что он должен был делать.

редактировать

Причина, по которой селектор "Начать с" css не может использоваться с ng-классом, заключается в том, что "начинается с" выполняет цельное сравнение строк по значению класса.

ng-binding

получает предпочтение от Angular до классов, которые применяются в директиве ng-class, поэтому класс становится

class="ng-binding foo"

... который не начинается с foo.

licensed under cc by-sa 3.0 with attribution.