Reloading current child state from side menu causes loss of header


#1

I’m creating a simple Ionic menu app and I would like to reload the current state from the side menu.Here’s the Plunkr illustrating the problem.

In the ‘Search’ state, I’m displaying the current time. The desired behavior is the following: when I click ‘Search’ from the side menu, the time is refreshed, i.e. the controller is reloaded. This should happen even when I’m already on the Search page.

To be able to reload the state, I changed two things:

  1. I disabled view caching in app.js config function: $ionicConfigProvider.views.maxCache(0);
  2. In menu.html, I’m passing ui-sref-opts to explicitly reload the state:
    <ion-item menu-close ui-sref="app.search" ui-sref-opts="{reload: true}">

The result is that the time is indeed updated, however, the header of the view is gone!

Any suggestions as to what I’m doing wrong?

Below is the relevant setup. The only things different from the ionic menu starter template, are the ones I mentioned above.

app.js:

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
  $ionicConfigProvider.views.maxCache(0);
  
$stateProvider

    .state('app', {
          url: "/app",
          abstract: true,
          templateUrl: "menu.html",
          controller: 'AppCtrl'
        })

        .state('app.search', {
          url: "/search",
          views: {
            'menuContent' :{
              templateUrl: "search.html",
              controller: 'SearchCtrl'
            }
          }
        });
    });

menu.html:

  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>

  <ion-side-menu side="left">
    <header class="bar bar-header bar-stable">
      <h1 class="title">Left</h1>
    </header>
    <ion-content class="has-header">
      <ion-list>
        <ion-item nav-clear menu-close ui-sref="app.search" ui-sref-opts="{reload: true}">
          Search
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/browse">
          Browse
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/playlists">
          Playlists
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

search controller:
.controller(‘SearchCtrl’, function($scope) {
$scope.now = new Date();
})