Nav stack clears when navigating away from tabbed view


#1

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) {
});

#2

why not so many people mention this, this also bother me.

I have found one solution on stackoverflow, not sure this is the correct solution.