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.
Remove the {{}} from class . Write like this ng-class="app.style"
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/