Ionic nav-back-button not showing up

3
votes

I'm new to Ionic and I'm currently trying to make my own app which is built up by several tabs. I'm currently facing the problem that my back button is not showing up. In my events tab, I allow people to click on an event in a list which opens a href with a details page for that specific event (event.html). My problem is that somehow the back buttons won't show up in any view at all. I even tried the easy route of creating a blank new view with just the nav bar and back button but it's still not showing up. Can anyone tell me what I need to do for my back button to show up?

Thanks a lot!

index.html:

<body ng-app="App">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-icon button-clear">
    <i class="icon ion-arrow-left"></i> Back
</ion-nav-back-button>
</ion-nav-bar>

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

tabs:

<ion-tabs class="tabs-icon-top">
    <ion-tab title="Events" icon="ion-calendar" ui-sref="tabs.events">
        <ion-nav-view name="events-tab"></ion-nav-view>
    </ion-tab>
</ion-tabs>

app.js:

.state('tabs.events', {
    url: '/events',
    views: {
      'events-tab': {
        templateUrl: 'views/events/events.html',
        controller: 'EventsController'
      }
    }
  }).state('event', {
    url: '/event/:id',
    templateUrl: 'views/events/event.html',
    controller: 'EventController'
  });

events.html (link to details page)

<a href="#/event/{{event.id}}">

event.html:

<ion-view view-title="{{event.title}}">
<ion-content>

    Event title: {{event.title}} <br />
    Group name: {{event.groupname}} <br />
    Date: {{event.date}} <br />
    Description: {{event.description}} <br />

</ion-content>
</ion-view>
2
javascriptangularjscordovamobileionic-framework

2 Answers

2
votes

Add this to your controller which you want to go back

$scope.$on('$ionicView.beforeEnter', function (event, viewData) {
    viewData.enableBack = true;
});
1
votes

I was facing the same issue , but then I used custom arrow exactly at the place I wanted to use. u can add the custom arrow image to your CSS file and then can use accordingly. ng-click="goBack()" is used to navigate to the page where u want to go, and u can define that in your .js file. I hope this works

HTML file

<ion-nav-buttons side="left">
    <a ng-click="goBack()" class="button back-button buttons  button-clear header-item nav-back-btn">
        <i class="ion-android-arrow-back" id="customArrow"></i>
    </a>
</ion-nav-buttons>