Hello,
I have a tabbed view and want to load a new page upon clicking on some button. I want the new page to not show the tabs, but have a back button that will navigate back to the tabbed page. It appears that when I navigate away via $state.go in my controller or using a href link in the script, that the nav stack is cleared.
Is there anyway around this? Please let me know if I am not making sense or if I can provide any more information that will be helpful.
Thanks in advance!
Here is the example source that I am using to test this. The feed tab has the two buttons, one href and one ng-click, to navigate to register.html. When you hit the register page, the back button does not show. Although the feed->register stuff doesn’t make sense, this is just a quick test I threw together.
Also, if there is no proper way to fix it - is there a way programmatically I can force the page to go back using a controller? I know I can throw some buttons up there using and make it look like it was the original back button.
Here is index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter" animation="slide-left-right-ios7">
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-icon icon ion-ios7-arrow-back"></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
<script type="text/ng-template" id="login.html">
<ion-view title="Login">
<ion-content class="padding">
<button ng-click="login()">Login</button>
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="register.html">
<ion-view title="Register">
<ion-nav-back-button class="button-icon icon ion-ios7-arrow-back">
</ion-nav-back-button>
<ion-content class="padding">
<button ng-click="register()">Register</button>
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="tabs.html">
<ion-tabs class="tabs-positive">
<ion-tab title="Dashboard" icon="icon ion-home" href="#/tabs/feed">
<ion-nav-view name="feed"></ion-nav-view>
</ion-tab>
<ion-tab title="Friends" icon="icon ion-heart" href="#/tabs/friends">
<ion-nav-view name="friends"></ion-nav-view>
</ion-tab>
<ion-tab title="Account" icon="icon ion-gear-b" href="#/tabs/account">
<ion-nav-view name="account"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script type="text/ng-template" id="feed.html">
<ion-view title="Feed" >
<ion-content class="padding">
<h1>Feed</h1>
<a href="#/register">Register</a>
<button ng-click="register()">Register</button>
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="friends.html">
<ion-view title="Friends">
<ion-content>
<ion-list>
<ion-item ng-repeat="friend in friends" type="item-text-wrap" href="#/tab/friend/{{friend.id}}">
{{friend.name}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="friend-detail.html">
<ion-view title="{{friend.name}}">
<ion-content has-header="true" padding="true">
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="account.html">
<ion-view title="Account">
<ion-content class="padding">
<h1>Account</h1>
</ion-content>
</ion-view>
</script>
</body>
</html>
Here is the app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'login.html',
controller: 'LoginCtrl'
})
.state('register', {
url: '/register',
templateUrl: 'register.html',
controller: 'RegisterCtrl'
})
.state('tabs', {
url: '/tabs',
templateUrl: 'tabs.html'
})
.state('tabs.feed', {
url: '/feed',
views: {
'feed': {
templateUrl: 'feed.html',
controller: 'FeedCtrl'
}
}
})
.state('tabs.friends', {
url: '/friends',
views: {
'friends': {
templateUrl: 'friends.html',
controller: 'FriendsCtrl'
}
}
})
.state('tabs.friend-detail', {
url: '/friend/:friendId',
views: {
'friends': {
templateUrl: 'friend-detail.html',
controller: 'FriendDetailCtrl'
}
}
})
.state('tabs.account', {
url: '/account',
views: {
'account': {
templateUrl: 'account.html',
controller: 'AccountCtrl'
}
}
});
$urlRouterProvider.otherwise('/login');
});
Here is controllers.js
angular.module('starter.controllers', [])
.controller('LoginCtrl', function($scope, $state) {
$scope.login = function() {
$state.go('tabs.feed');
};
})
.controller('RegisterCtrl', function($scope, $state) {
$scope.register = function() {
$state.go('login');
};
})
.controller('FeedCtrl', function($scope, $state) {
$scope.register = function() {
$state.go('register');
};
})
.controller('FriendsCtrl', function($scope, Friends) {
$scope.friends = Friends.all();
})
.controller('FriendDetailCtrl', function($scope, $stateParams, Friends) {
$scope.friend = Friends.get($stateParams.friendId);
})
.controller('AccountCtrl', function($scope) {
});