Hello,
I am trying to implement tabs. I want it to look something like this:
Code follows…
.state('app.schedule', {
url: '/schedule',
abstract: true,
templateUrl: 'templates/schedule.html'
})
.state('app.schedule.day1', {
url: '/day1',
views: {
'day1': {
templateUrl: 'templates/day1.html',
controller: 'ScheduleCtrl'
}
}
})
.state('app.schedule.day2', {
url: '/day2',
views: {
'day2': {
templateUrl: 'templates/day2.html',
controller: 'ScheduleCtrl'
}
}
})
.state('app.schedule.day3', {
url: '/day3',
views: {
'day3': {
templateUrl: 'templates/day3.html',
controller: 'ScheduleCtrl'
}
}
})
.state('app.schedule.day4', {
url: '/day4',
views: {
'day4': {
templateUrl: 'templates/day4.html',
controller: 'ScheduleCtrl'
}
}
})
<ion-view view-title="Schedule">
<ion-tabs class="tabs-icon-top tabs-stable tabs-striped tabs-top tabs-positive">
<ion-tab title="Oct-1" icon="ion-android-calendar" ui-sref="app.schedule.day1">
<ion-nav-view name="day1"></ion-nav-view>
</ion-tab>
<ion-tab title="Oct-2" icon="ion-android-calendar" ui-sref="app.schedule.day2">
<ion-nav-view name="day2"></ion-nav-view>
</ion-tab>
<ion-tab title="Oct-3" icon="ion-android-calendar" ui-sref="app.schedule.day3">
<ion-nav-view name="day3"></ion-nav-view>
</ion-tab>
<ion-tab title="Oct-4" icon="ion-android-calendar" ui-sref="app.schedule.day4">
<ion-nav-view name="day4"></ion-nav-view>
</ion-tab>
</ion-tabs>
However when I click on schedule link, nothing happens.
But it works when I change the route of schedule page as below:
.state('app.schedule', {
url: '/schedule',
views: {
'menuContent': {
templateUrl: 'templates/schedule.html'
}
}
})
A tab parent view should be abstract right? Why is it not working in my case? Am I missing something?