Ion-nav-view doesn't work as expected in beta 1

ionic-v1
1

After spending some time trying to implement routes for my app using the following documentation I found that the codepen was out of date and no longer works with Ionic 1.0.0-beta.1

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

After implementing routes and navigation in my app I found that the back button does not show up.

For comparison, here is the original codepen: http://codepen.io/ionic/pen/6d3f67226cbecc8383cc8680b6d3832a

And here is mine:

All I did was update Ionic to the latest and it breaks the back button.

If someone that is familiar with the latest code could help out and get this working,
I am willing to put in the time to fork and update the related documentation.

Thanks

Mike

2

I figured out a way to get the back button working.

It is not an elegant solution by any means.

I ended up hiding the generated nav bars on my view with

<ion-view hide-nav-bar="true">

Because if I just added

<ion-nav-buttons>

To the views the nav bar would de-render before the back
animation was complete, it just didn’t look that great.

My solution was to dig directly into the $rootScope
something must be broken between the final nav-bar and
the $root scope.

I added

$scope.goBack = function() {
    $rootScope.$viewHistory.backView.go();
}

To my controller and used it in the ng-click of my manually
created back button.

It would be nice to have the same system as the pre-beta version
where the back button automatically shows up, but this will do for now.

If I’m missing something please let me know, maybe there is a much
easier way to do it, but it just isn’t documented yet.

3

I’ve had pretty good mileage in using the nightly documentation:
http://ajoslin.github.io/docs/nightly/api/directive/ionHeaderBar/

Not sure if this is very different from documentation on the ionic site, but I haven’t had any problems implementing a nav-bar and back button in the 1.0 beta.

4

@coen_warmer Sure, but the ion-nav-bar and ion-nav-view should automatically take care of adding a back button by default.

5

The breaking changes in beta 1 are described in the sticky here in the forum. The back button directive is also in the docs ion-nav-back-button. It works for me, so i’m not quite sure I understand your point.

6

@coen_warmer that documentation isn’t up to date anymore!

Use http://ionicframework.com/docs/nightly/api !

7

Ok, thanks for the heads up @andy!

8

@mquadrat I think I found my confusion.

I was using the codepen so I could see the full implementation of routing and
the nav-view. The codepen has not been updated and is still on the old version of Ionic.

After looking at the ion-nav-back-button and looking over the rest of the relevant
documentation again it is much more clear to me and I have it working in my project.

I fixed my codepen to work with Ionic 1.0.0-beta.1:

@andy If someone from the team could update the current codepen on the documentation to reflect my changes I think it would
help others.

Thanks!

Mike

9

One more problem that I ran into that is related to the ion-nav-view.

I have a left side menu in one of my templates, but when I toggle it
the main nav-bar doesn’t slide over like it would if I just had the ion-header-bar
in the template itself, it just stays on top of the side menu’s header-bar.

Am I missing something here?