I'm starting a project using the built in Slide Menu example.
I'm using a lot of nested states (an event has lots of sub-events, which has lots of participants).
My problem is that when coming from a nested state with the back button to a controller with this code below, the code doesn't execute. For example Sub Event 1.1 -> back to -> Event 1 (subevents tab)
$scope.$on('$ionicView.beforeEnter', function (event, viewData) {
console.log('something');
});
However, when switching tab with the back button, the code above executes. For example Event 1 (info tab) -> back to -> Event 1 (subevents tab).
I've got an abstract state for the tab and 3 sub states for each tab. The code above is present in each controller of each state of each tab.
One of the tab shows a list, and clicking on a list item brings us to another tab system as you can see below.
.state('app.events.detail', {
url: "/:eventId",
abstract: true,
views: {
'menuContent@app': {
templateUrl: "modules/events/views/events/detailTabs.html",
controller: 'EventCtrl'
}
}
})
.state('app.events.detail.subevents', {
url: '/subevents',
views: {
'event-subevents': {
templateUrl: 'modules/events/views/events/tab-subevents.html', //idea would be to include list in this html file; segragates like controller
controller: 'EventSubEventsCtrl'
}
}
})
.state('app.events.detail.info', {
url: '/info',
views: {
'event-info': {
templateUrl: 'modules/events/views/events/tab-info.html',
controller: 'EventInfoCtrl'
}
}
})
.state('app.events.detail.live', {
url: '/live',
views: {
'event-live': {
templateUrl: 'modules/events/views/events/tab-live.html',
controller: 'EventLiveCtrl'
}
}
})
.state('app.events.detail.subevents.detail', {
url: "/:subEventId",
abstract: true,
views: {
'menuContent@app': {
templateUrl: "modules/events/views/subevents/detailTabs.html",
controller: 'SubEventCtrl'
}
}
})
.state('app.events.detail.subevents.detail.participants', {
url: '/participants?refresh', //refresh to force refresh
views: {
'subevent-participants': {
templateUrl: 'modules/events/views/subevents/tab-participants.html', //idea would be to include list in this html file; segragates like controller
controller: 'SubEventParticipantsCtrl'
}
}
})
.state('app.events.detail.subevents.detail.info', {
url: '/info',
views: {
'subevent-info': {
templateUrl: 'modules/events/views/subevents/tab-info.html',
controller: 'SubEventInfoCtrl'
}
}
})
.state('app.events.detail.subevents.detail.live', {
url: '/live',
views: {
'subevent-live': {
templateUrl: 'modules/events/views/subevents/tab-live.html',
controller: 'SubEventLiveCtrl'
}
}
})
This what tabs all look like; a nested view for each.
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Subevents Tab -->
<ion-tab title="Sub Events" icon-off="ion-document-text" icon-on="ion-document-text" ui-sref=".subevents">
<ion-nav-view name="event-subevents"></ion-nav-view>
</ion-tab>
<!-- Info Tab -->
<ion-tab title="Info" icon-off="ion-information-circled" icon-on="ion-information-circled" ui-sref=".info">
<ion-nav-view name="event-info"></ion-nav-view>
</ion-tab>
<!-- Live Tab -->
<ion-tab title="Live" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" ui-sref=".live">
<ion-nav-view name="event-live"></ion-nav-view>
</ion-tab>
</ion-tabs>
And this is what the left Slide Menu looks like
<ion-side-menus>
<ion-side-menu-content drag-content="true">
<ion-nav-bar class="bar-dark">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear 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-light">
<h1 class="title">Navigation</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/app/login">
Login
</ion-item>
<ion-item menu-close href="#/app/account">
Account
</ion-item>
<ion-item menu-close href="#/app/events">
Events
</ion-item>
<ion-item menu-close href="#/app/logout">
Logout
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>