Navigation, Back Button, how it works

ionic-v1
1

Hi there and congrats to the Ionic team! I really like what i’ve seen from the framework so far and I hope that it’s development will be continued leading to a stable release! To the point…

While there are some questions, either on the forum or on stack overflow, I can’t manage to make the navigation button work. So I thought I should open this topic and ask how it works/its behaviour. Since the code looks pretty clear and simple, the buttons do not show up hence, I can’t go back to the previous page which is vital for an app. I also tried with the other code snippet but it didn’t work either. Are there any requirements for it to work? Do I have to include anything to my index page (ion-nav-view)? I saw some examples on code pen but they also had to do with tabs so it was not only about the back button. Anyone that can help me understand how it works?

<ion-nav-bar>
  <ion-nav-back-button class="button-clear">
    <i class="ion-arrow-left-c"></i> Back
  </ion-nav-back-button>
</ion-nav-bar>
2

What kind of view are you going back from and going back to? Are they tabs?

3

Well I do have 4 tabs. In one of those there are 6 buttons which are linked to other pages. When I click on one of those, the page shows but there is no back button.

4

Hmm, so something similar to this?

6

Are you wrapping the views in a ion-view?

Please look over the docs for ion-nav-view and ion-view

http://ionicframework.com/docs/api/directive/ionNavView/
http://ionicframework.com/docs/api/directive/ionView/

7

Ok I got it working! The issue had to do with app.js. I though that I didn’t have to declare every tab’s subpage as a tab. So when I checked the app.js of the demo I saw this(facts is a subpage of home tab, and not a seperate tab) and I figured it out! Thanks!

.state('tabs.home', {
  url: "/home",
  views: {
    'home-tab': {
      templateUrl: "home.html",
      controller: 'HomeTabCtrl'
    }
  }
})
.state('tabs.facts', {
  url: "/facts",
  views: {
    'home-tab': {
      templateUrl: "facts.html"
    }
  }
})