3

I am building an app using Ionic & AngularJS and using states to manage the views. I have a side menu which is accessed by a nav button. When transitioning to my "home" page the menu is not visible until I refresh!

In my side menu I use $state.go wrapped in a $timeout to navigate to different page and it works perfectly, but when doing it during my authorization login (eg: once auth'd moved over to app.home) the button is not visible unless I refresh the page.

It appears questions like this are asked often and I have tried every single solution I could find; I tried wrapping the $state.go in a $timeout, tried using $state.transitionTo, tried setting reload to true with $state.go(... {reload:true}, and tried reload:true inherit:false with transitionTo. Nothing is fixing this issue. I have even tried to rework my workflow to handle this from different locations but whatever I do the menu button doesn't show up.

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">

      <ion-nav-buttons side="primary">
        <button class="button button-icon 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-stable">
      <h1 class="title">Title!</h1>
    </ion-header-bar>

    <ion-content ng-controller="menuController">

      <ion-list>
        <ion-item nav-clear menu-close ng-click="navHome()">
          Home
        </ion-item>
        ...

$scope.navHome = function () {
    $timeout( function() {
        $state.go('app.home');
    });
};

The above works fine when clicked from the ng-click, yet the following function which is inside my loginController and executes after a successful authentication does not work (the menu icon doesn't show until I refresh the page)

    var _login = function() {
        // do server side stuff
        $timeout(function () {
            $state.go('app.home');
        });
    };

** update ** I have a workaround in place but I'd still like to understand what's going on here as I don't think this is the "right" way. I moved around my code so that app.home is loaded, then state.go over to app.login (where the menu button is invisible, which is fine), then when login have state.go back over to app.home the menu button is present again. I presume this is because it was transitioned away from and back to.

Joshua Ohana
  • 5,613
  • 12
  • 56
  • 112
  • Why have you wrapped the `$state.go()` calls in a `$timeout`? That generally shouldn't be necessary. – Sly_cardinal Jan 26 '15 at 00:07
  • @Sly_cardinal if I don't do that in the menu calls then the nav-button is invisible unless I reload the page. Wrapping it in a $timeout solved that issue in that case. Is there a better solution? – Joshua Ohana Jan 26 '15 at 00:22
  • @VinitChouhan What I ended up doing was wrapping my login page in a separate state view (abstract auth, and state for auth.login). I still don't understand why I was experiencing the behavior I did but have a reliable workaround for now. I think it's related to how and when AngularJS loads states vs views... When I have time later today I'll post the full answer here. – Joshua Ohana Feb 03 '15 at 15:31

2 Answers2

8

The attribute enable-menu-with-back-views on <ion-side-menus> needs to be set to true.

As long as you don't have <ion-nav-back-button></ion-nav-back-button> included in <ion-nav-bar> you won't see a back button. If you do include an <ion-nav-back-button> in your <ion-nav-bar>, you can disable it per state by setting hide-back-button="true" on your <ion-view>. I found that $timeout was not necessary.

Josh Durham
  • 1,632
  • 1
  • 17
  • 28
1

Only solved to me this:

$ionicHistory.clearCache();
$ionicHistory.clearHistory();
$ionicHistory.nextViewOptions({ disableBack: true, historyRoot: true });
Vinicius Zilli Pavei
  • 136
  • 4