Hidden nav-bar using $state.go() with disabled caching (Beta 14)


#1

Hey everyone,

I have a problem with navigating in my app since I have updated Ionic to Beta 14. To reload the next page I use the function $state.go() with reload : true or to reload the current page the function $state.reload(). To disable caching I use the new service with $ionicConfigProvider.views.maxCache(0).

When the page is reloaded, the nav-bar is hidden with class="hide" in ion-nav-bar. I tried to handle this by setting hide-nav-bar="false" in the ion-view, but in the tag ion-header-bar the class disable-user-behaviour is set automatically.

I edited the Codepen example “Sidemenu and Navigation: Nightly” (http://codepen.io/ionic/pen/QwamEW) with the following code to reproduce the problem:

HTML:

<script id="templates/event-menu.html" type="text/ng-template">
  <ion-side-menus enable-menu-with-back-views="false">

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

        <ion-nav-buttons side="left">
          <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
          </button>
        </ion-nav-buttons>
      </ion-nav-bar>

      <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content> 

    <ion-side-menu side="left">
      <ion-header-bar class="bar-assertive">
        <h1 class="title">Left Menu</h1>
      </ion-header-bar>
      <ion-content>
        <ul class="list">
          <!-- Note each link has the 'menu-close' attribute so the menu auto closes when clicking on one of these links -->
          <a href="#/event/home" class="item" menu-close>Home</a>
          <a href="#/event/content" class="item" menu-close>Content</a>
        </ul>
      </ion-content>
    </ion-side-menu>

  </ion-side-menus>
</script>

<script id="templates/home.html" type="text/ng-template">
  <ion-view view-title="Welcome">
    <ion-content class="padding">
      <p>Swipe to the right to reveal the left menu.</p>
      <p>(On desktop click and drag from left to right)</p>
    </ion-content>
  </ion-view>
</script>

<script id="templates/content.html" type="text/ng-template">
  <ion-view view-title="Content">
    <ion-content>
     
      <button ng-click="click()">Home</button>
     
    </ion-content>
  </ion-view>
</script>

JS:

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

  $ionicConfigProvider.views.maxCache(0);
  
  $stateProvider
    .state('eventmenu', {
      url: "/event",
      abstract: true,
      templateUrl: "templates/event-menu.html"
    })
    .state('eventmenu.home', {
      url: "/home",
      views: {
        'menuContent' :{
          templateUrl: "templates/home.html"
        }
      }
    })
   
    .state('eventmenu.content', {
      url: "/content",
      views: {
        'menuContent' :{
          templateUrl: "templates/content.html",
          controller: "ContentCtrl"
        }
      }
    })
  
  $urlRouterProvider.otherwise("/event/home");
})

.controller('MainCtrl', function($scope, $ionicSideMenuDelegate) {
  
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
})

.controller('ContentCtrl', function($scope, $state) {
  
  $scope.click = function(){
   		$state.go("eventmenu.home", {}, {reload : true});
  }
  
});

Thanks for helping me!


#2

Were you able to solve this?


#3

No, I was not able to solve this yet.


#4

Same thing happening to me and I can’t figure out why/where the hide class is added.


#5

Same problem here. Would love a solution/workaround.


#6

Same problem! … any solution?


#7

I do have the problem as well. Would be cool to have it fixed.


#8

Exactly the same problem! I tried some code snippets, but none solved.


#9

I’m having a similar issue except I’m using $ionicConfigProvider.view.transition(‘none’) and am experiencing my nav-bar and it’s buttons gone from each page/state.


#10

I wrote an app based on tabs seed. I used statusbar plugin, created my statusbars in my views, but I got the annoying thing. The nav-bar disappears constantly. How?

I launch my app, login and display the dashboard screen.
Close the app or reinstall with (ionic run ios)
App opens but without nav-bar (it’s hidden)

I found this issue and yes I use $state.go with cache disabled but the issue is random and it happens on both platforms.
This is production showstopper for me. I try to find some workaround but the FIX is needed here, fast.


#11

Facing the same issue here. Anyone was able to find a solution?


#12

+1 on the same problem.
I tried unsuccessfully with using state.transitionTo as well.

Any fix coming up soon?
@max - Any updates?


#13

+1 Same problem. Doing many unnecessary workarounds because of this…


#14

This is still an issue for me in 1.0.0. Here’s the line that hides the nav bar, at least in my case:

Comment it out and it doesn’t hide the bar. Still trying to come up with a fix. Overriding the .hide class with something doesn’t work in all cases.

EDIT: ending up switching to ion-header-bar based on this comment: https://github.com/driftyco/ionic/issues/3483#issuecomment-91507272


#15

I have the same issue, but wasn’t able to replace my navbar with headerbar.

My workaround was to remove reload: true from my $state.go call and add a new state parameter to allow reloads: cb: (new Date()).getTime(). It is now working for me with v1.0.0


#16

Here’s a plunk that nicely reproduces the issue with 1.0.0, maxCache(0), and calling $state.go() with reload: true.


#17

This bug has been reported to GitHub a few days ago and is now marked as a milestone for ionic 1.0.2 (we are currently at 1.0.0). See https://github.com/driftyco/ionic/issues/3852

For those desparate for a cosmetic workaround, I’m currently doing something along the lines of this:

// Fix the disappearance of the nav bar on return to app.

setTimeout(function(){
	if($('ion-nav-bar').hasClass('hide')){
		$('ion-nav-bar').removeClass('hide');
		$('ion-view').css('padding-top','44px');
		$('ion-content').css('margin-top','43px');
	}else{
		$('ion-view').css('padding-top','0');
		$('ion-content').css('margin-top','-1px');
	}
},1000);

This code probably looks dumb in a number of ways but you get the idea. You could have your controller do these cosmetic cleanups (or better ones) depending on if your controller should or should not show a nav-bar for that particular state.


#18
<ion-view>
     <ion-nav-bar style="display:none"></ion-nav-bar>
     <ion-content style="top:0">
          <h1>Welcome</h1>
     </ion-content>
</ion-view>

I hope this helps,
IonicBrazil greetings!


#19

Has this been fixed ?


#20

Has this been fixed? It is happening to me also randomly.