Search code examples
cssangularjsionic-frameworkng-class

ion-nav-bar ng-class not styling

<ion-nav-bar ng-class="{'bar-positive': isAndroid, 'bar-stable': !isAndroid}">
</ion-nav-bar>

<ion-tabs ng-class="{'tabs-positive': isAndroid, 'tabs-icon-top': true}">

  <!-- Account Tab -->
  <ion-tab title="Account" icon="ion-ios7-gear" href="#/tab/account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>

</ion-tabs>

When I use the following markup, only the ion-tabs is styled - not the ion-nav-bar. How can I get them both to be styled, and why isn't the ion-nav-bar getting styled?

Solution

  • Ok, never mind. There's an issue for this on github. Also, I've found a somewhat convoluted workaround that should be fine until they fix the ion-nav-bar directive:

    <ion-nav-bar class="{{ isAndroid ? 'bar-positive' : 'bar-stable' }}">
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>