Hi there,
I’m a novice ionic coder, so my apologies in advance if I’m trying to do something silly. I have a test app using code I’ve lifted from other samples which has a left side menu. When I navigate to a specific page from the side menu, I would like to display tabs for that page. For each of those tabs, I was hoping display content from a template file. So based on the code that I have lifted, I have a file called mainContainer.html
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar type="bar-positive"
back-button-type="button-icon"
back-button-icon="ion-ios7-arrow-back"
animation="nav-title-slide-ios7"
>
</ion-nav-bar>
<ion-nav-view name="main"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-assertive">
<div class="title">Side Menu</div>
</header>
<ion-content has-header="true">
<ul class="list">
<a ui-sref="entry" class="item">Back To Entry Page</a>
<a ui-sref="main.home" class="item" ng-click="toggleMenu()">Home</a>
<a ui-sref="main.tabs.info" class="item" ng-click="toggleMenu()">Tabs</a>
</ul>
</ion-content>
</ion-side-menu>
and when I navigate to the main.tabs.info, I have an abstract main.tabs view where I want to display content for each of the tabs.
So router section of the app.js looks like this:
angular.module('ionicApp', ['ionic'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('entry', {
url : '/entry',
templateUrl : 'templates/entry.html',
controller : 'EntryPageController'
})
.state('main', {
url : '/main',
templateUrl : 'templates/mainContainer.html',
abstract : true,
controller : 'MainController'
})
.state('main.home', {
url: '/home',
views: {
'main': {
templateUrl: 'templates/home.html',
controller : 'HomePageController'
}
}
})
.state('main.info', {
url: '/info',
views: {
'main': {
templateUrl: 'templates/info.html',
controller : 'InfoPageController'
}
}
})
.state('main.tabs', {
url: '/tabs',
abstract: true,
templateUrl: 'templates/tabs.html',
controller : 'TabsPageController'
})
.state('main.tabs.info', {
url: '/tabs-info',
views: {
'tabs-info': {
templateUrl: 'templates/tabs-info.html',
controller : 'TabsPageController'
}
}
})
.state('main.tabs.stuff', {
url: '/tabs-stuff',
views: {
'tabs-stuff': {
templateUrl: 'templates/tabs-stuff.html',
controller : 'TabsPageController'
}
}
})
The tabs template file looks like this:
<ion-tabs tabs-type="tabs-icon-only">
<ion-tab title="Tab 1" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" ui-sref="main.tabs.info">
<ion-nav-view name="info"></ion-nav-view>
</ion-tab>
<ion-tab title="Tab 2" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" ui-sref="main.tabs.stuff">
<ion-nav-view name="stuff"></ion-nav-view>
</ion-tab>
</ion-tabs>
The sample code that I’ve seen has for each of the tabs, http://codepen.io/calendee/pen/JdtuG . I want to do something similar but in this case I want to have separate template files instead. Thanks in advance for any help/suggestions.