Bug in the standard nested view construct?


#1

Screenshot of the issue: http://puu.sh/gMgdI/1bcf52f5b8.png

I’m using a reasonably standard setup to have a left menu with a nested view or two in the content area. Trouble is, I keep running into this intermittent bug where the back button appears when it shouldn’t. It’s difficult to reliably repro but usually if I’ve gone from my list through to the detail page, submitted a chat message and then gone back and to the profile page, the back button shows up like abad smell :smile:

I’m going to try some more to get a more concrete repro but if anyone has come up against this before and has some tips, I’d love to hear them.

menu.html

<ion-side-menus>
  <ion-side-menu-content>

    <ion-nav-bar align-title="right" class="bar-positive nav-title-slide-ios7">
      <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="menu-view" animation="slide-left-right-ios7"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <header class="bar bar-header bar-positive">
      <h1 class="title"></h1>
    </header>
    <ion-content class="has-header">
      <ion-list>
        <ion-item nav-clear menu-close ui-sref="app.beacons">
          All Beacons
        </ion-item>
        <ion-item nav-clear menu-close ui-sref="app.profile">
          Profile
        </ion-item>
        <ion-item nav-clear menu-close ui-sref="login">
          Logout
        </ion-item>
      </ion-list>
    </ion-content>

  </ion-side-menu>
</ion-side-menus>

user-profile.html

<ion-view name="user-profile" title="User Profile">
<ion-nav-buttons side="left">
  <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>

<ion-content>
    <div class="list card">
      <div class="item item-avatar">
        <h2 class="username">{{ currentUser.username }}</h2>
        <h3 class="email">{{ currentUser.email }}</h3>
        <h3 class="tag">{{ currentUser.puser.gamertag }}</h3>
        <h3 class="platform">{{ currentUser.puser.platform.name }}</h3>
      </div>

      <div class="item item-body">
        <p class="item-blue">Registered: {{currentUser.createdAt | amCalendar}}</p>
      </div>

    </div>

	</ion-content>
</ion-view>

beacon-list.html

<ion-view name="beacon-list" title="Active Beacons">
<ion-nav-buttons side="left">
	<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content>
<ion-refresher on-refresh="refreshBeaconList()"></ion-refresher>

<div class="list card" ng-repeat="beacon in beacons">
	<div class="row row-center">
    <div class="col">
      <div class="item item-avatar">
				<img ng-src="//destinybuddy.parseapp.com/img/{{ beacon.mission.type }}_icon_tiny.png">
				<h2 class="mission-name">{{ beacon.mission.name }}</h2>
				<h3 ng-if="beacon.level" class="level-name">{{ beacon.level.name }}</h3>
      </div>
    </div>
		<div class="col col-right col-25">
      <i class="platform-icon ion-icon {{beacon.platformIcon}} padding-right"></i>{{ beacon.region.name }}
      <div am-time-ago="beacon.createdAt" class="mission-time"></div>
    </div>
  </div>

	<div class="item tabs tabs-secondary tabs-icon-left">
	    <a class="tab-item" ng-disabled="beacon.fireteamRoleAdmin" ng-click="joinBeacon( beacon.objectId )">
	      <i class="icon ion-checkmark"></i>
	      Join
	    </a>
	    <a class="tab-item" ng-disabled="beacon.fireteamRoleAdmin" ng-click="leaveBeacon( beacon.objectId )">
	      <i class="icon ion-close"></i>
	      Leave
	    </a>
			<a class="tab-item" ui-sref="app.beacon({beaconId: beacon.objectId})">
	      <i class="icon ion-eye"></i>
	      View
	    </a>
	  </div>

</div>

</ion-content>

<div class="float-button-wrapper">
	<div class="float-button">
		<span class="height-fix">
			<a ui-sref="beacon-create" class="content">
				<i class="ion-plus"> </i>
			</a>
		</span>
	</div>
</div>

</ion-view>

some of my router code:

$stateProvider

.state('login', {
  url: '/login',
  templateUrl: 'templates/login.html',
  controller: 'LoginCtrl'
})

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

.state('app.beacons', {
  url: '/beacons',
  views: {
    'menu-view': {
      templateUrl: 'templates/beacon-list.html',
      controller: 'BeaconsCtrl',
      resolve: {
        beacons: function(BeaconService) {
          return BeaconService.list();
        }
      }
    }
  }
})

.state('app.beacon', {
  url: '/beacons/:beaconId',
  views: {
    'menu-view': {
      templateUrl: 'templates/beacon-detail.html',
      controller: 'BeaconCtrl',
      resolve: {
        beacon: function($stateParams, BeaconService) {
          return BeaconService.get($stateParams.beaconId)
        },
        messages: function($stateParams, ChatService) {
          return ChatService.list($stateParams.beaconId)
        }
      }
    }
  }
})

.state('app.profile', {
  url: '/profile',
  views: {
    'menu-view': {
      templateUrl: 'templates/user-profile.html',
      controller: 'UserCtrl',
      resolve: {
        user: function(AuthService) {
          return AuthService.getFullUser()
        }
      }
    }
  }
})

#2

Bumping this as it still happens


#3

Anyone have any insight on this?


#4

Instead of adding button manually have you tried hide-nav-bar=“false” directive? Not sure it will make any difference, but worth a try…