Why my back button is not working?

ionic-v1
1

Hello Guys, I have a weird issue here

I just need to have a back button in my header, I see a lot of Google results and documentation examples…

Problem 1: My Header is it… But the ion-nav-back-button is not shown (for something that I don’t know) :confused:

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

	<h1 class="title">Post</h1>
</ion-header-bar>

Problem 2: I tried to solve this, using a hardcoded back button, in this way:

<ion-header-bar class="bar bar-header bar-positive">
	<a class="button icon-left ion-ios7-arrow-back button-clear" ng-click="backButton()"></a>

	<h1 class="title">Post</h1>
</ion-header-bar>

And, in the controller:

  .controller('postCtrl', function ($scope, $stateParams, $ionicNavBarDelegate) {
    $scope.backButton = function() {
      console.log('back');
      $ionicNavBarDelegate.back();
    };
  })

And when I click, I see the log in console but the back function not work ://

WTH I’m doing wrong guys?

Sometimes I have a error on console:
Error: [$compile:ctreq] Controller ‘ionNavBar’, required by directive ‘ionNavBackButton’, can’t be found!

Problem 3: I changed my code to use ion-nav-bar, but just work if I navigate to 3 pages…
1 - home state -> Click to post state
2 - post state -> (dont show back btn) Click to home state
3 - home state -> Click to post state
4 - post state -> Now the back button is been shown

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

=s

I’m using the release v1.0.0-beta.5b

2

Can you throw this into a codepen?

3

I made a Vine to show the problem… https://vine.co/v/MHxeA6aTh5F

4

The problem with a video, is that I still have no reference to what could be wrong with the code…

Check out the ionic demo

5

I made a pen http://codepen.io/anon/pen/feFpE but the back button is working on this pen… I will check my code again… :confused:

6

@mhartington Descobri o problema. I found the problem. Maybe is a bug of Ionic or a feature…

Here is the Pen simulating the error http://codepen.io/felquis/pen/CvpDy

In the home.html view, I don’t have the ion-nav-back-button, see that the button is commented

In the post.html view, I have the ion-nav-back-button.

So, to use the ion-nav-back-button all the pages need to have a ion-nav-back-button.

1 Like
7

Actually you whole code is a bit off.

You have ion-nav-bars in all your ion-view. Instead you initial view should be

<ion-nav-bar class="nav-title-slide-ios7 bar-positive">
  <ion-nav-back-button class="button-icon ion-arrow-left-c">
  </ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right" name="app-view"></ion-nav-view>

Take a look at the docs.
http://ionicframework.com/docs/api/directive/ionNavView/

8

Yeah! I fixed that. Thank you @mhartington

9

Is there any way to do a nav back button with a header bar and not a nav-bar?

10

build your own backbutton? and do history.back manually when you click an that button

1 Like
11

@mhartington I started from the sidemenu example.

Questions:

  1. How can I replace the burger icon in some screens with a back or cancel button? How about add it in addition to the burger icon?

  2. Do I need to specify where back buttons will be in the menu template itself? (as I see mention of back buttons when inspecting the code)

2.a) How can I set back buttons for pages not directly accessible through the menu system?

  1. How can I fix the problems with the code I’ve tried below:

The example sidemenu index.html contains this:

<body ng-app="myapp">
  <ion-nav-view class="slide-left-right">
  </ion-nav-view>
</body>

In attempt to fix back/nav-bar-buttons from sometimes not working, I’ve updated according to your post, to this:

<body ng-app="boosterapp">
  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button class="button-icon ion-arrow-left-c">
    </ion-nav-back-button>
  </ion-nav-bar>
  <ion-nav-view class="slide-left-right">
  </ion-nav-view>
</body>

However, I still don’t always see my back button, in code like this for ba-comments-list.tpl.html which is added like so:

.state('app.photocomments', {
  url: "/photo/:selfieId/comments",
  views: {
    'menuContent': {
      template: "<ba-comments-list></ba-comments-list>"
    }
  }
})

And the code of the template is like this:

<ion-view hide-back-button="false" title="{{mytitle}}">
  <ion-content class="has-header" style="height:80%;">
    <ion-list>
      <ion-item ng-repeat="comment in comments">

In this case, the output page contains this:

<ion-nav-back-button class="hide"></ion-nav-back-button>

Where does this class=“hide” come from, and how can I show the back button? Btw, removing this class in the inspector doesn’t make the button show.

Or, in code like this I have for share, I try a cancel button like so:

<ion-view hide-back-button="false" title="Share">
  <ion-nav-buttons side="primary">
    <button class="button" ng-click="cancel()">
      Cancel
    </button>
  </ion-nav-buttons>

In this case, I simply don’t see any mention of the cancel button in the inspector. Actually, I’m not sure how can I search through the entire source code by right clicking somewhere.

  1. How can I do that?

Here is what I have in my ba-menu.tpl.html, which was based on the sidemenu example:

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left" class="dark">
    <ion-header-bar class="bar-stable" id="menuHeader">
//...
12

So I think there is some confusion about the navigation.
So showing/hiding or menu toggles and back buttons have been automated for the most part.

So most of your questions/issues can be resolved by setting up your project correctly.

For the back button not showing sometimes, it may have something to do with the directive you have defined in your startprovider.

Please put a codepen together demoing this.

13

@mhartington The problem with CodePen is you have to reproduce, in a manner different than you project, for each problem.

Can I share my Ionic View and github/bitbucket somehow? If Ionic could provide that ability, it’d be huge.

14

Hey @mhartington, my main issue is that the back button is replaced with menu icon where it shouldn’t.

I’m using ionic tabs only at the home page which is one of the menu items, but at the rest menu items I don’t use them.

My goal is to have the back button placed only at “inside” pages (pages that aren’t tabs or menu items), and at the rest of the time the menu icon should appear instead.

I’m working with adaptivedev and you can review some of the code snippet above, and if you need some further info, let me know and I’ll send it to you since it’s kinda difficult to reproduce with CodePen.

15

So you have tabs and side-menus combined together?
From the look things (checked out the code on bitbucket), seems like what you are describing is an issue with the two ui structures being used together.

You may want to open a new issue and reference this already opened issue.

16

@mhartington I have an idea about what might be causing problems:

It’d help to know which different transition types causes the menu/back/cancel/header buttons to dis/appear automatically.

  1. $state.go
  2. url redirect link (e…g a href #/app/tabs-page)
  3. Menu navigation (I’m not sure how that works internally)
  4. tabs clicking, and explicit $ionicTabsDelegate.select(i) (which I think works fine)

And, it’d be nice to have manual control over this automatic process for combination of UI components/usage that is bound to come up in real apps beyond core examples.

I looked over the docs for menu/header/buttons but I didn’t spot this information.

Should this be a new ticket? Or maybe it can be answered here?

Thanks!

17

What the back button is tied to any kind of transition types, but the history of the app in general.

So if there is a view to go back to, a back button will appear.
You can control whether a back button is hidden with ion-views

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

18

@mhartington I’m trying to understand your explanation.

But I’m seeing what seems contradictory: For example: why is it that if I switch between 2 menu pages, each of which are views, as shown below, I always see the menu button, and not a back button?

<ion-view hide-back-button="false" title="Profile">

Also, how can you control when the menu button will show?

Ie, to have both the back button AND the menu button?

And, how can I control when I’ll (also/instead) have some custom button (like cancel, or a custom ‘back’ button)?

I’ve tried to follow the ion-nav-buttons section in the docs, but maybe that didn’t jive with the side-menu setup?

It’d be great if there were a sample app like sidemenu and tabs that included menu+tabs+ion-nav-buttons. Should that be a feature request or?

19

So the main issue now I’m seeing is the overall structure of your side-menu…
So you have ion-items and a href="" inside of those, which is causing the issue.

You can just put the links on the ion-items and not use any a tags.

20

My back button is showing only every other time.

I’ve narrowed down the issue to the back button showing every other time I change from:

choose menu.page1 -> click burger icon -> choose menu.page1 -> click some button, go to -> menu.page2

I removed the tabs and it still does the same behavior, so it’s not the ion-tabs fault.

I placed breakpoints and looked at $ionicHistory.viewHistory() but I’m not sure what to make of the differences.

Here are those differences for the same page, reached in the same way, 2 times in a row, 1 not having a back button, and 1 having it:

Any ideas on what’s wrong here or some suggestions?