Using a nav bar in all views except one -- what approach?


#1

I want an app with one main activity view that has no (visible) navbar but the rest of the views can/ought to show a navbar.
My first hack at this was to have navbar outside of the all the navviews but and turn on/off the bar during $stateChangeSuccess/$stateChangeStart events

zrApp.controller("zireviewController", function ($rootScope,$state,$ionicNavBarDelegate) {
    $rootScope.$on("$stateChangeStart",
        function (event, current, previous, rejection) {
            console.log('start ',  $state);
        });
    $rootScope.$on("$stateChangeSuccess",
        function (event, current, previous, rejection) {
            var on = current.name != 'review';
            console.log('success ', on, $state);
          //  $ionicNavBarDelegate.showBar(on);
        });
});

Next I tried the same approach but using the onEnter/onExit methods from ui.router stateProvider.
Neither of these approaches worked - they seem to call showBar on the navbardelegate but nothing happens.
I can show and hide the navbar from a button on the view (with corresponding controller logic).

I also tried having navbars in each view where it is needed but that behaved strangely.

I assume I am just taking the wrong approach to this goal – can someone suggest a correct approach?

Thanks


#2

And then I had the bright idea to have a button that hides the navbar and then navigates to the view I want to show without the toolbar. But no - when I combine these two actions:

>  $scope.goReview = function(tf) {
>             $state.transitionTo('review');
>             $ionicNavBarDelegate.showBar(!tf);
>          //   setTimeout(function(){$state.transitionTo('review')},1);

>         }

the bar does not hide.


#3

The way I would do it is by using an ion-pane for the non-nav view, and an abstract template with the ion-nav-bar/ion-nav-view along with child states/templates for the ion-views you want in a nav.

Here is a code pen with an example:

Perhaps there is a better solution, but this seems to work.


#4

Thanks. That looks like what I am looking for. Could you point me to something that would explain why what I attempted to do was doomed? I didn’t think I was “going behind angular’s back”.


#5

I don’t know enough about Ionic or AngularJS to give you a good answer (personally I just started learning both about a week ago)…so don’t take what I say below as correct, because it might not be, they are just guesses. Also, I don’t know how you were structuring your html templates, or setting up your states, so I couldn’t give you a full answer anyway.

  1. Trying to hide it during $stateChangeSuccess seems like it should have worked, so I don’t know why. Maybe $ionicNavBarDelegate needs to reinitialize or something during state changes as well and your event handler was getting called before it was fully set up? Don’t know.
  2. having ion-nav-bars in each view probably resulted in your state being wiped out or something funky like that. From what I understand, the same ion-nav-bar needs to exist in order to get your view history (back button).
  3. I am assuming that when you transition to a ion-nav-view, the ion-nav-bar gets shown by default. Which is probably why having a button that hides it, then transitions to a new ion-view wasn’t working (once the transition completes, the ion-nab-bar would automatically get shown). This might also explain why hiding it in the $stateChangeSuccess wasn’t working, as you would hide it, but then it would just get shown automatically.

You know what?! I bet that if you just put $ionicNavBarDelegate.showBar(false); in your “review” controller it would have worked.


#6

Also, doing it my way means that when you go from the non-nav view to a nav view, there is no back button to go back to the non-nav view.

Having an ion-nab-bar on all views and then hiding it on the non-nav view will give you a back button when you go to nav view.

So I guess it depends on if you want a back button to the non-nav view or not.

But again, I am new to all this as well…so if the Ionic folks want to chime in here that would be great.


#7

I will try your last idea tomorrow, but right now the codepen example got me what I need. (I think, so far, with no real testing yet…)


#8

I will have a “home” button in the non nav view which I can implement using $state.go().