Show/Hide the Ionic Navbar programmatically

ionic-v1
1

Hi everyone,
I’m trying to show/hide the navbar for a specific view on tap, since I need both to show a fullscreen image and allow the user to go back to the previews view.

What I tried untill now:

solution #1:
I added a $scope variable within the hide-nav-bar attribute but when the variable changes the navbar isn’t shown/hidden accordingly.

solution #2:
within the view’s controller

var hideNavBar = angular.element( '#navbar' );

$cordovaStatusbar.hide();    
hideNavBar.attr('hide-nav-bar', 'false');

$scope.toggleFullscreen = function() {
  if ( $cordovaStatusbar.isVisible() === true ) {
    hideNavBar.attr('hide-nav-bar', 'false');
    $cordovaStatusbar.hide();
  }
  else {
    hideNavBar.attr('hide-nav-bar', 'true');
    $cordovaStatusbar.show();
  }

};

solution #3:

$ionicNavBarDelegate.showBar(false);
$cordovaStatusbar.hide();

$scope.toggleFullscreen = function() {
  if ( $cordovaStatusbar.isVisible() === true ) {
    $ionicNavBarDelegate.showBar(false);
    $cordovaStatusbar.hide();
  }
  else {
    $ionicNavBarDelegate.showBar(true);
    $cordovaStatusbar.show();
  }

};

the solution above kinda works, but when the navbar is shown again it is empty.

I also tried disabling the cache in the main controller holding the main view (where is the navbar’s markup) but nothing changed.

Any ideas?

1 Like
2

Hi, I don’t know how your views are defined, but each view should have it’s own <ion-view> and on that you can set hide-nav-bar, so you should be able to configure it per view.

Check out this post Hide ion-nav-bar for single page?

3

@ashteya thank you for your reply.
I apologize for not being clear enough (sorry I’m not a native speaker). What I’m trying to achieve is a navbar toggle on tap event. In fact what you suggests works but I need to do so programmatically within the very same view.

E.g. From a list view I select an item opening its own view that is without status bar and nvabar by default (so I can enjoy a full screen image for example). When I tap on the screen the status bar and navbar appear (with a back button) and viceversa.

Ideas?

4

OK, I understand what you’re trying to do. I’d say the solution where you’re using the $ionicNavBarDelegate is the way to go, but if the header shows up as empty maybe there’s a bug in it.

It’s probably better to put up a Codepen example of what you’re trying to do with the $ionicNavBarDelegate solution and ask one of the Ionic Devs to have a look at it.

5

Just to update this topic, on the version 1.2.1 there is an Javascript object which contains functions to handle this question which becomes a smaller code block (1~2 lines).

http://ionicframework.com/docs/api/utility/ionic.Platform/

Look into functions showStatusBar and fullScreen.

Eg:

// fullScreen([showFullScreen], [showStatusBar])
ionic.Platform.fullScreen(true, false) // this makes your View to resize to Fullscreen