Display back button in ion-nav-bar iOS only

Though I'm sure this is something that isn't uncommon in ionic development, I can't seem to find anything on the web that explains this. If I have the following:

<body ng-app="myApp">

  <ion-nav-bar class="bar-positive">
  </ion-nav-bar>

  <ion-nav-view></ion-nav-view>

</body>

And one of the views that I use in the ion-nav-view looks like this for exmaple:

<ion-view view-title="Profile" ng-controller="profileController" class="profile-view">
  <ion-content class="padding has-header">
  ....

How do I display a back button (really just the ion-chevron-left icon) for iOS only, and have it hidden on other devices that have a dedicated hardware button?

There are a couple of ways to achieve platform specific behaviour. You can read up on the back button specifically, here.

  1. In your controller, you can use the ionic.Platform utility to determine the current platform and the Ionic NavBarDelegate to show/hide the button.

HTML:

<body ng-app="app" ng-controller="appCtrl">
  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button></ion-nav-bar-back-button>
  </ion-nav-bar>
</body>

Controller:

.controller('appCtrl', function($scope, $ionicNavBarDelegate) {
   var isIOS = ionic.Platform.isIOS();
   $ionicNavBarDelegate.showBackButton(isIOS);
});
  1. In your css, define separate classes to show/hide the element depending on the platform. From here.

HTML:

<body ng-app="app" ng-controller="appCtrl">
  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button class="platform-nav"></ion-nav-bar-back-button>
  </ion-nav-bar>
</body>

CSS:

.platform-ios .platform-nav {
    display: block;
}
.platform-android .platform-nav {
    display: none;
}