定制项目分隔器怪异

Question

http://codepen.io/pondnetic/pen/MwEqJK

当$ scope.theme为“黑暗”时，这两件事情的评价是否相同？

<ion-item class="item-divider-dark">dark divider 1</ion-item>

<ion-item class="item-divider-{{theme}}">dark divider 2</ion-item>

第一个黑暗分隔符在我的项目中使用scss看起来正确，但在codepen中是错误的。第二个暗分隔符在我的项目和代码集中看起来完全相同，也就是说，完全错误。为什么两者之间存在差异？

Answer 1

在第二个版本中使用ng-class

  

ngClass指令允许您通过数据绑定表示要添加的所有类的表达式来动态设置HTML元素上的CSS类。

<ion-item ng-class="item-divider-{{theme}}">dark divider 2</ion-item>

如果您不使用ng-class，则不会解析类名。

修改

在important的{​​{1}}上使用background-color：

.item-divider-dark

DEMO