How to prevent custom back button from getting ng-hide class set?

@mza wrote:

I have an app that I'm working on, and the goal is to show information about a game. Sometimes, I start the app in state /games/:game_id, and the back button isn't present as a result, so I've started to work on a solution for this. You can see in the below that showCustomBackButton is set to true in the generated html (l17), but it isn't being shown because there's a class of ng-hide set as well. Any suggestions on how to prevent the ng-hide class from being shown?

The source code:

<ion-nav-view>
  <ion-view view-title='{{ game.title }}', hide-back-button='false'> <!-- always show a back button in this view -->

    <ion-nav-bar class='bar-stable nav-title-slide-ios7' align-title='center'>
      <ion-nav-buttons>
        <button class='button back-button deep-link-back-button buttons button-clear header-item button-icon' ng-show='{{showCustomBackButton}}'>
          <i class='ion-arrow-left-c'></i>
        </button>
      </ion-nav-butons>
      <ion-nav-back-button class='button button-icon ion-ios7-arrow-back button-lear' ng-hide='{{showCustomBackButton}}'>
        <i class='ion-arrow-left-c'></i>
      </ion-nav-back-button>
    </ion-nav-bar>

    <ion-content> <!-- not important --> </ion-content>
  </ion-view>
</ion-nav-view>

The auto-generated HTML from Ionic:

<!-- only showing the nav section since that's where my question centers -->

<ion-nav-view name="main" animation="slide-left-right-ios7" align-title="center" class="view-container" nav-view-transition="android"></ion-nav-view>
<ion-nav-title class="hide"></ion-nav-title>
<ion-view view-title="Crash Bandicoot" hide-back-button="false" class="pane" nav-view="active" style="transform: translate3d(0%, 0px, 0px);">
<ion-nav-bar align-title="center" class="bar-stable nav-title-slide-ios7 nav-bar-container" nav-bar-transition="android" nav-bar-direction="forward" nav-swipe="">
  <ion-nav-buttons class="hide"></ion-nav-buttons>
  <ion-nav-back-button ng-hide="true" class="hide"></ion-nav-back-button>
  <div class="nav-bar-block" nav-bar="cached">
    <ion-header-bar class="bar-stable nav-title-slide-ios7 bar bar-header disable-user-behavior" align-title="center">
    <button ng-hide="true" class="button back-button hide buttons button-icon ion-ios7-arrow-back button-clear header-item" ng-click="$ionicGoBack()">
      <i style="padding:8px" class="ion-arrow-left-c"></i>
      <span class="back-text"></span>
    </button>
    <div class="buttons buttons-left header-item">
      <span class="left-buttons">
        <button ng-show="true" class="button back-button deep-link-back-button buttons button-clear header-item button-icon ng-hide">
          <!-- the above line has the offending class -->
          <i style="padding:8px" class="ion-arrow-left-c"></i>
        </button>
      </span>
    </div>
    <div class="title title-center header-item"></div>
    </ion-header-bar>
  </div>
  <div class="nav-bar-block" nav-bar="active">
    <ion-header-bar class="bar-stable nav-title-slide-ios7 bar bar-header disable-user-behavior" align-title="center">
    <button ng-hide="true" class="button back-button hide buttons button-icon ion-ios7-arrow-back button-clear header-item" ng-click="$ionicGoBack()">
      <i style="padding:8px" class="ion-arrow-left-c"></i>
      <span class="back-text"></span>
    </button>
    <div class="buttons buttons-left header-item">
      <span class="left-buttons">
        <button ng-show="true" class="button back-button deep-link-back-button buttons button-clear header-item button-icon ng-hide">
          <i style="padding:8px" class="ion-arrow-left-c"></i>
        </button>
      </span>
    </div>
    <div class="title title-center header-item" style="left: 15px; right: 15px;">Crash Bandicoot</div>
    </ion-header-bar>
  </div>
</ion-nav-bar>

Posts: 1

Participants: 1

Read full topic