My project is organized in such a way that I want the user to be able to navigate between view in a list that are in a certain order. The default slide transition takes into account the user's navigation history, which is sometimes good and sometimes bad. Is there a way to simply pass along which way I want the view to slide?
Here is a Codepen that demonstrates the issue I am having.
<!-- Codepens on StackOverflow require code to accompany the link. The link is much easier to follow, but here is the code just in case you cannot view the codepen or if the link is broken in the future. -->
<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>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>
<script type="text/javascript">
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.detailview', {
url: "/detailview/:index",
views: {
'home-tab': {
templateUrl: "detailview.html",
controller: 'DetailviewTabCtrl'
}
}
});
$urlRouterProvider.otherwise("/tab/home");
})
.controller('HomeTabCtrl', function($scope) {
$scope.details = [{id: 1},{id: 2},{id: 3},{id: 4},{id: 5}];
})
.controller('DetailviewTabCtrl', function($scope,$stateParams) {
$scope.id = parseInt($stateParams.index);
$scope.previous = parseInt($stateParams.index) - 1;
$scope.next = parseInt($stateParams.index) + 1;
});
</script>
</head>
<body>
<ion-nav-bar class="nav-title-slide-ios7 bar-stable">
</ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
<script id="tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-stable">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="home.html" type="text/ng-template">
<ion-view title="Home">
<ion-content class="padding">
<p>Example of the navigation issue. If you go to item 1, then item 2, then back to item 1, the transitions look correct.<br/> However, if you start over and go to item 2, then item 3, then back to item 2, then to item 1, the transitions appear to slide in from the wrong direction.</p>
<p>
<ion-list>
<ion-item ng-repeat="detail in details" ng-href="#/tab/detailview/{{detail.id}}" class="item item-icon-right ">
Item {{detail.id}}
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-list>
</p>
</ion-content>
</ion-view>
</script>
<script id="detailview.html" type="text/ng-template">
<ion-view title="Details on item {{id}}">
<ion-content class="padding">
<ion-nav-buttons side="right">
<a ng-href="#/tab/detailview/{{previous}}" class="button button-clear button-dark" ng-disabled="previous == 0"><i class="ion-chevron-left"></i></a>
<a ng-href="#/tab/detailview/{{next}}" class="button button-clear button-dark" ng-disabled="next == 6"><i class="ion-chevron-right"></i></a>
</ion-nav-buttons>
<h2>{{id}}</h2>
<p>Please use the navigation buttons on the top left of the screen.
</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
After you have selected an item, use the navigation buttons on the top right of the screen to navigate back and forth. If you start with the first item, all transitions appear normal. By that I mean, when you press right, the new screen slides to the in from the right. However, if you start with a different item, the direction in which the screen slides in from varies based on your navigation history.
Is there any code changes or attributes that I could use to explicitly state which way I want the screen to side?
You can use nav-direction="back" and nav-direction="forward" on your navigation buttons. http://codepen.io/enbashi/pen/MYRNjy