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>