How do you add a back button to this example

how do you add a back button to this example:
http://codepen.io/ionic/pen/tcIGK

The back button doesn’t have to exist in that context. It’s not useful; navigation to separate parts of the application is done via the side menu. If, however, you want a “home” button on the other pages, such as Check-In and Attendees from that example, you have two options:

1.Add it manually to the pages where you want it to, as such:

    <ion-view view-title="Attendees">
      <ion-nav-buttons side="right">
        <button class="button button-icon icon ion-home" ui-sref="eventmenu.home"></button>
      </ion-nav-buttons>
     <ion-content> and so on

2.Add it inside the <ion-side-menu-content> directive:

<ion-side-menu-content>
      <ion-nav-bar class="bar-positive">

        ...blah code in here

        <ion-nav-buttons side="right">
          <button ui-sref="eventmenu.home" class="button button-icon button-clear ion-home" menu-close>
          </button>
        </ion-nav-buttons>
      </ion-nav-bar>
      <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>

then hide the button on the homepage like so:

<ion-view view-title="Welcome">
    <ion-nav-buttons side="right"></ion-nav-buttons>

Here’s the pen

Hmm. I see. I understand what you mean now.

It’s like I have this:

  • Home
    • Check-in
      • Check-in view 1
      • Check-in view 2
    • Attendees
      • Attendees view 1
      • Attendees view 2

You’re saying that it just makes sense to add back buttons to the third level views?

Just add regular javascript back history. It will navigate you back throu every page that user viewed.

Something like this:

<button class="button button-icon menu_button"
        onClick="javascript:history.back()">
</button>

After using your example, the side-menu doesn’t open anymore:

I’m using this:

  <ion-nav-buttons side="left">
        <button class="button button-icon icon ion-home" ui-sref="layout.feed()" menu-close></button>
  </ion-nav-buttons>

The second alternative worked pretty well. Thanks!

Transition is not working, though. Any way to force a transition?

Nope, I don’t think you can force it. The only transition that you see when using a side menu is the menu closing&opening, but the pages themselves don’t have any fancy pants transition.

To make the page navigation smoother, although I don’t recommend it as it would be a design inconsistency, you could bind your “home” button to a function that redirects the user to the desired page while displaying a backdrop.

So you’d have it like so:

<ion-nav-buttons side="left">
        <button class="button button-icon icon ion-home" ng-click="goHome();" menu-close></button>
  </ion-nav-buttons>

Now, in the controller you need to inject $ionicBackdrop. Say:

function MyController($state, $scope, $ionicBackdrop, $timeout) {
  //Show a backdrop for one second
  $scope.goHome = function() {
    $ionicBackdrop.retain();
    $timeout(function() {
      $ionicBackdrop.release();
      $state.go('layout.feed');
    }, 500);
  };
}

Also, I saw your ui-sref="" points to layout.feed() which might be a mistake. The value of that attribute must be the name that you defined for your desired page’s route. So it’s ok if you have something like this in your router:

$stateProvider.state('layout.feed()', {
  .. blah
})

But if you have - which you probably do

$stateProvider.state('layout.feed', {
  .. blah
})

Then your ui-sref must point to layout.feed.

I agree with the design inconsistency, so I won’t do the animation there.

But the routing code works.
My state is this:

    $stateProvider
      .state('layout.feed', {
        url: '/feed',
        views: {
          'content': {
            templateUrl: 'feed/home/feed.home.html',
            controller: 'FeedController as vm'
          }
        }
      });

using ui-sref="layout.feed()" works just as ui-sref="layout.feed"

Hehey, you’re right. It works that way as well. But now I gotta know why…

Well, if you were passing parameters to the route, you would do something like this: ui-sref="layout.feed({id: 1})". No wonder it works without parameters as well