Question

是的......它是表格数据。

所以，问题标题解释了大部分内容，但我会提供一些更具体的内容：我的控制器上有一个包含属性的模型＆＃34; Name＆＃34;和＆＃34;价值＆＃34;（有可能性＆＃34;好＆＃34;和＆＃34;坏＆＃34;）

我在SCSS文件中定义了2个类，以便为＆＃34;有效＆＃34;提供样式。和＆＃34;无效＆＃34;值。

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>

好的，所以关键在于：如果我使用：

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

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

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

它以红色文字颜色呈现值。

然而，如果我使用：

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

使用黑色（默认）彩色文本呈现值。（同样为酒吧）

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

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

但是如果我检查样式选项卡，Foo中的样式还没有应用到我的元素......它在我的级联中没有任何地方。

任何人都能说出具体的内容吗？

Answer 1

我找到了原因。它与使用正则表达式选择器构建block__element - 修饰符css结构有关。

ng-class显然不尊重＆＃34;以＆＃34;开头css选择器。

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

    }
  }
}

我必须将初始[class ^= "block"]更改为[class *= "block"] 这绝对是废话......但是ng-class能够做它应该做的事情。

修改

＆＃34;开始的原因＆＃34; css选择器不能与ng-class一起使用是＆＃34;以＆＃34;开头对类的值执行整个字符串比较。

ng-binding

由Angular预先添加到通过ng-class指令应用的类中，因此类成为

class="ng-binding foo"

......不以foo开头。

Angular ng-class设置适当的类（在页面源中确认）但不会应用样式

1 个答案:

修改