Ion-nav-view doesn't work as expected in beta 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

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:

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.




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


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() {

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.


I’ve had pretty good mileage in using the nightly documentation:

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.


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


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.


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

Use !


Ok, thanks for the heads up @andy!


@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.




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?