In the process of developing an Ionic application, I encountered a strange issue where the dynamic class set through ng-class suddenly stopped working. Despite being correctly resolved in the HTML, the selectors associated with it simply do not apply.
Here is the template snippet in question:
<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>
Upon inspection, the resulting HTML seems to be completely fine:
<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>
However, attempts to use .Tallin in CSS selectors prove futile as they don't seem to have any effect. Interestingly, using it as a regular static class works perfectly fine, indicating a possible issue with how the dynamic class is being processed.
This anomaly only surfaced recently without a clear indication of what might have caused it. Any insights or suggestions would be greatly appreciated.