I am trying to navigate between nested states but it is not working as expected which probably indicates that there is something obvious that I don’t understand.
The basic idea is to navigate between the state “tab.info” and the state “tab.info.about”. I would like a back button to show up automatically. This is my first time using deeply nested routing states.
The problem I am having is that the tab.info.about page is not showing up at all so I can’t determine if the back button is appearing correctly.
This is what the routing configuration and controllers look like. Note the ‘tabs.info’ and ‘tabs.info.about’ states.
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tab.home', {
url: '/home',
views: {
'tab-home': {
templateUrl: 'templates/tab-home.html',
controller: 'HomeCtrl'
}
}
})
.state('tab.search', {
url: '/search',
views: {
'tab-search': {
templateUrl: 'templates/tab-search.html',
controller: 'SearchCtrl'
}
}
})
.state('tab.info', {
url: '/info',
views: {
'tab-info': {
templateUrl: 'templates/tab-info.html',
controller: 'InfoCtrl'
}
}
})
.state('tab.info.about', {
url: '/about',
views: {
'tab-info': {
templateUrl: 'templates/tab-info-about.html',
controller: 'InfoAboutCtrl'
}
}
})
;
$urlRouterProvider.otherwise('/home');
})
.controller('InfoCtrl', function($scope, $state) {
console.log('InfoCtrl');
$scope.about = function() {
$state.go('tab.info.about');
};
})
.controller('InfoAboutCtrl', function($scope) {
console.log('InfoAboutCtrl');
})
.controller('SearchCtrl', function($scope) {
console.log('SearchCtrl');
})
.controller('HomeCtrl', function($scope) {
console.log('HomeCtrl');
})
;
This what the HTML looks like:
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Nested Tab States Example</title>
<link href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.js"></script>
</head>
<body>
<ion-nav-bar class="nav-title-slide-ios7 bar-positive">
<ion-nav-back-button class="button-icon ion-ios7-arrow-back">
Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-ios7-home" href="#/tab/home">
<ion-nav-view name="tab-home"></ion-nav-view>
</ion-tab>
<ion-tab title="Search" icon="ion-ios7-search" href="#/tab/search">
<ion-nav-view name="tab-search"></ion-nav-view>
</ion-tab>
<ion-tab title="Info" icon="ion-ios7-information-outline" href="#/tab/info">
<ion-nav-view name="tab-info"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/tab-info.html" type="text/ng-template">
<ion-view title="Information">
<ion-content class="padding">
<p>Lot's of interesting information here.
For more stuff click the "About" button.
</p>
<a class="button icon-right ion-chevron-right"
ng-click="about()">
About
</a>
</ion-content>
</ion-view>
</script>
<script id="templates/tab-info-about.html" type="text/ng-template">
<ion-view title="About">
<ion-content class="padding">
<p>About us.</p>
<p>Back button should appear in the upper left hand corner.</p>
</ion-content>
</ion-view>
</script>
<script id="templates/tab-search.html" type="text/ng-template">
<ion-view title="Search">
<ion-content class="padding">
<p>Search</p>
</ion-content>
</ion-view>
</script>
<script id="templates/tab-home.html" type="text/ng-template">
<ion-view title="Home">
<ion-content class="padding">
<p>Home</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
Any insights would be greatly appreciated.
Thanks.
