Currently I’m using states in my Ionic Framework App. When I press the back button to return to a previous state it shows the current state and the state that it should transition to in the same screen.
Error Screen:
Each Individual Screen Looks like this:
Screen 1:
Screen 2:
On transition from Screen 1 back button to Screen 2 the error screen occurs.
In my configuration file the current setup is as such:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.events', {
url: '/events',
views: {
'tab-event': {
templateUrl: 'views/events.html',
controller: 'EventsCtrl'
}
}
})
.state('tab.event-detail',{
url:'/events/:eventId',
views: {
'tab-event':{
templateUrl: 'views/event.html',
controller: 'EventDetailsCtrl'
}
}
})
.state('tab.attendees',{
url: '/events/:eventId/attendees/:attendeeIds',
views: {
'tab-event':{
templateUrl: 'views/attendees.html',
controller: 'AttendeesCtrl'
}
}
})
.state('tab.attendee-detail',{
url: '/events/:eventId/attendee/:attendeeId',
views: {
'tab-event':{
templateUrl: 'views/attendee.html',
controller: 'AttendeeDetailCtrl'
}
}
});
$urlRouterProvider.otherwise('/login');
});
When i press the back button From the ‘tab.attendees’ state back to the ‘tab.event-detail’ state the error occurs. If it helps I transition from ‘tab.event-detail’ state to ‘tab.attendees’ state via anchor tag like so:
<a ng-href="#/tab/events/{{event.id}}/attendees/{{event.attendees}}">See Attendees</a>
What could be causing the screen mix error?