Question

我正在构建一个离子应用程序，最近通过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，它们都没有效果。我尝试将它用作常规静态类，只是为了验证选择器，它们可以工作。

直到最近才出现这个问题，但我不确定哪个更改开始了。任何想法都将不胜感激。

Answer 1

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

Answer 2

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/

css选择器忽略AngularJS ng-class

2 个答案: