AngularJS ng-class 被 css 选择器忽略答案

【问题标题】：AngularJS ng-class is ignored by css selectorsAngularJS ng-class 被 css 选择器忽略
【发布时间】：2014-10-05 03:44:52
【问题描述】：

我正在构建一个离子应用程序，最近通过 ng-class 设置的动态类停止了任何效果。它仍然在 HTML 中正确解析，但选择器无法处理它。

这是模板：

<ion-nav-bar class="bar-positive nav-title-slide-ios7" ng-class="{{ app.style }}">
        <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
</ion-nav-bar>

这是生成的 HTML，据我所知，这非常好：

<ion-nav-bar class="bar-positive nav-title-slide-ios7 bar bar-header nav-bar disable-user-behavior  no-animation" ng-class="Tallin">
  <ion-nav-back-button class="button-clear button back-button ng-hide"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
  <div class="buttons left-buttons"> <span class="">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </span></div>
  <h1 ng-bind-html="title" class="title ng-binding" style="left: 51px; right: 51px;">Home</h1>
  <div class="buttons right-buttons"> </div>
</ion-nav-bar>

但如果我现在尝试在任何 CSS 选择器中使用 .Tallin，它们将不起作用。我尝试将它用作常规静态类，只是为了验证选择器，它们可以工作。

直到最近这才成为问题，但我不确定是哪个更改开始的。任何想法将不胜感激。

【问题讨论】：

我不知道ng-class 和class 之间的关系，但我知道类选择器将从不匹配HTML 中除@ 之外的任何其他属性987654325@。如果它在生成的 HTML 中显示为 ng-class 而不是 class，则它永远不会匹配类选择器。
你是对的。我不确定这到底是如何工作的，但我检查了一些示例，AngularJS 将解析的 ng-class 添加到类中。
删除卷曲。例如：ng-class="app.style">
是的，做到了。我也刚刚想通了。感谢 BoltClock 让我走上正轨

标签： html css angularjs ionic-framework

【解决方案1】：

ng-class 需要一个表达式，{{ }} 插入 HTML。

直接参考

<p ng-class="class">Text</p>

或者在你的控制器上有一个功能

<p ng-class="getClass()">Text</p>

或使用对象语法

<p ng-class="{ 'red': true }">Text</p>

真的，几乎任何被视为表达式的东西都可以使用。

JSFIDDLE：http://jsfiddle.net/1Lbjj8yf/

【讨论】：

【解决方案2】：

从 class 中删除 {{}}。像这样写ng-class="app.style"

【讨论】：