Ion-view gets title and ion-nav-buttons of previous view

ionic-v1
#1

The issue

I have a single <ion-view>, the roles view, that is not getting it’s title set correctly or <ion-nav-buttons side="right> updated.

Instead it always picks up the title and both left and right <ion-nav-buttons> from the previously shown view, the.

What I’ve tried

  • Setting the title by using title="MyViewTitle" and
    view-title="MyViewTitle" attributes on the <ion-view> tag.

  • Setting the title with the <ion-nav-title>MyViewTitle</ion-view-title> tag set directly after
    the ` tag

  • Completely uninstalling the app before running ionic run android

My code

.config

.config([
  'stateHelperProvider',
  '$urlRouterProvider',
  '$ionicConfigProvider',
  'lkGoogleSettingsProvider',
  function(stateHelperProvider, $urlRouterProvider, $ionicConfigProvider, lkGoogleSettingsProvider) {
  
  // ** roles view picks up title and ion-nav-buttons when navigated to 
  // from settings, calendar and landing views. These are the only views 
  // it is accessible from. **
  
  stateHelperProvider

  .state({
    name: 'app',
    url: '/app',
    abstract: true,
    cache: false,
    templateUrl: 'templates/menu.html',
    controller: 'MenuCtrl',
    children: [
      {
        name: 'home', 
        url: '/home',
        templateUrl: 'templates/landing.html',
        controller: 'HomeCtrl',
      },{
        name: 'events',
        url: '/events',
        templateUrl: 'templates/events.html',
        controller: 'EventsCtrl'
      },{
        name: 'calendar',
        url: '/calendar',
        params:{
          selectedEvent: null,
          calendarTitle: 'Volunteer',
          isVolunteerSignup: true
        },
        templateUrl: 'templates/rcalendar.html',
        controller: 'CalendarCtrl'
      },{
        name: 'profile',
        url: '/profile',
        params:{
          isNewUser: null
        },
        templateUrl: 'templates/user_profile.html',
        controller: 'UserCtrl'
      },{
        name: 'admin',
        url: '/admin',
        abstract: true,
        cache: false,
        template: '<ion-nav-view></ion-nav-view>',
        children:[
          {
            name: 'calendar',
            url: '/calendar',
            params:{
              selectedEvent: null,
              calendarTitle: 'Calendar',
              isVolunteerSignup: true
            },
            templateUrl: 'templates/rcalendar.html',
            controller: 'CalendarCtrl'
          },{
            // ** This is the only view not behaving as expected.
            // Others shown for context **
            name: 'roles',
            url: '/roles',
            templateUrl: 'templates/roles.html',
            controller: 'RoleCtrl'
          },{
            name: 'settings',
            url: '/settings',
            templateUrl: 'templates/settings.html',
            controller: 'SettingsCtrl'
          }
        ]
      }
    ]
  });

menu.html

<ion-side-menus>

 <ion-side-menu-content>

   <ion-nav-bar ng-class="{'has-subject': subject}" 
             class="white-font bar-header bar-positive">

     <ion-nav-back-button ng-click="goHome()"></ion-nav-back-button>

   </ion-nav-bar>

   <ion-nav-view></ion-nav-view>

 </ion-side-menu-content>

 <ion-side-menu class="side-menu"
             width="140"
             side="left"
             ng-if="$root.isAdmin && user.school">

   <ion-header-bar class="white-font bar-header bar-positive">
     <h1 class="title">Admin Menu</h1>
   </ion-header-bar>

   <ion-content>

      <ion-list>

       <ion-item menu-toggle>
         <a class="button button-block button-clear button-dark" ui-sref="app.admin.calendar({ calendarTitle: 'Calendar', isVolunteerSignup: false })">Calendar</a>
       </ion-item>

       <ion-item menu-toggle>
         <a class="button button-block button-clear button-dark" ui-sref="app.admin.roles">Roles</a>
       </ion-item>

       <ion-item menu-toggle>
         <a class="button button-block button-clear button-dark" ui-sref="app.admin.settings">School Settings</a>
       </ion-item>

     </ion-list>

   </ion-content>

 </ion-side-menu>

roles.html

<ion-view class="role-management"  hide-back-button="true">

 <ion-nav-title>Admin Roles</ion-nav-title>

 <ion-nav-buttons side="left" >
   <button ng-if="$root.isAdmin && user.school" class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
 </ion-nav-buttons>

 <ion-nav-buttons side="right">
   <button class="button" ng-click="goHome()"><i class="icon ion-home"></i></button>
 </ion-nav-buttons>

 <ion-content class="padding">

   // View content displays correctly

   <div>View Content Here</div>

 </ion-content>

MenuCtrl

Pta.controller('MenuCtrl', [
  '$scope',
  '$state',
  '$ionicPlatform',
  function($scope, $state, $ionicPlatform) {
    
    $scope.goHome = function(){
      $state.go('app.home');
    }

    $ionicPlatform.onHardwareBackButton(function(){
      $state.go('app.home');
    });

}]);