AngularJS ng-class is ignored by css selectors

Question

I'm building an ionic application and recently the dynamic class set through ng-class stopped having any effect. It is still resolved correctly in the HTML, but the selectors just don't work on it.

Here's the template:

<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>

And here's the resulting HTML, which is perfectly fine as far as I can tell:

<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>

But if I now try to use .Tallin in any CSS selectors, they have no effect. I tried using it as a regular static class, just to validate the selectors, and they work.

This wasn't a problem until recently, but I'm not sure which change started it. Any ideas would be greatly appreciated.

I don't know the relationship between ng-class and class, but what I do know is that class selectors will never match any other attribute in HTML than class. If it appears as a value of ng-class but not class in the generated HTML, it will never match a class selector. — BoltClock
– BoltClock, Commented Aug 12, 2014 at 7:05
You are right. I wasn't sure how this works exactly but I checked some examples and AngularJS adds the resolved ng-class to class. — sorin.silaghi
– sorin.silaghi, Commented Aug 12, 2014 at 7:15
Yeah, that did it. I just figured it out as well. Thanks BoltClock for putting me on the right track — sorin.silaghi
– sorin.silaghi, Commented Aug 12, 2014 at 7:17

Ashisha Nautiyal · Accepted Answer · 2014-08-12 07:17:35Z

7

Remove the {{}} from class . Write like this ng-class="app.style"

answered Aug 12, 2014 at 7:17

Ashisha Nautiyal

1,3952 gold badges19 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ivarni · Accepted Answer · 2014-08-12 07:21:02Z

2

ng-class expects an expression, and {{ }} inserts HTML.

Either do a direct reference

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

or have a function on your controller

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

or use the object syntax

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

Really, just about anything that is considered an expression can be used.

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

answered Aug 12, 2014 at 7:21

ivarni

17.9k17 gold badges79 silver badges94 bronze badges

Collectives™ on Stack Overflow

AngularJS ng-class is ignored by css selectors

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related