Angularjs 角度ng类设置正确的类（在页面来源中确认），但赢得'；不要应用样式

是的，这是表格数据

因此，问题标题解释了大部分情况，但我将提供一些更详细的信息：我的控制器上有一个模型，其中包含属性“Name”和“Value”（可能是“GOOD”和“BAD”）

我在SCSS文件中定义了两个类，为“有效”和“无效”值提供样式

伪SCSS

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

加价

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

{{thing.name}
{{thing.value}}

好的，那么问题的关键是： 如果我使用：

<td class="Foo">{{thing.value}}</td>

<td class="Bar">{{thing.value}}</td>

<td ng-class="{'Foo':true}">{{thing.value}}</td>

{{thing.value}

它以绿色文本颜色呈现值。 如果我使用：

<td class="Foo">{{thing.value}}</td>

<td class="Bar">{{thing.value}}</td>

<td ng-class="{'Foo':true}">{{thing.value}}</td>

{{thing.value}

它以红色文本颜色呈现值

但是,， 如果我使用：

<td class="Foo">{{thing.value}}</td>

<td class="Bar">{{thing.value}}</td>

<td ng-class="{'Foo':true}">{{thing.value}}</td>

{{thing.value}

它使用黑色（默认）彩色文本呈现值。 （适用于酒吧）

当我在Chrome开发工具中检查我的元素时，我看到

<td ng-class="{'Foo':true" class="ng-binding Foo">GOOD</td>

很好

但是如果我检查样式选项卡，Foo中的样式还没有应用到我的元素中……它不在我的级联中

---

有人能告诉我是怎么回事吗？

我找到了原因。它与使用正则选择器构建块元素——修改器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开头的