Change animation of ion-nav-view for 1 button ng-click


#1

I have a ion-nav-view and ion-nav-bar on my index.html page, then i have some partial pages that have content that are wrapped within ion-view tags.

On my partial page i have 2 custom buttons, that allows the user to navigate through some content. When my custom right button is pressed, the slide moves from right to left, which is great. But if the left button is pressed, the navigation moves, but i would like the animation to go from left to right (opposite).

If there a way i can change the animation if a button is pressed, and then revert it back after?

Just a note, that from my content page, i am hiding the back button on the ion-nav-bar, as i do not want the user to use it. If you can show me how to do this using a button, with a ng-click using $location.url that would be great.

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My App</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="http://code.ionicframework.com/1.0.0-beta.3/css/ionic.css" rel="stylesheet"><script    src="http://code.ionicframework.com/1.0.0-beta.3/js/ionic.bundle.js"></script>

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="controller.js"></script>

</head>
<body ng-app="myApp">
<ion-nav-bar class="nav-title-slide-ios7 bar-positive">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
        </ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right">
<!-- Center content -->
</ion-nav-view>

</body>
</html>

Page1.html

<ion-view title="Home">
<ion-content >
<a class="button button-block button-positive" href="#/settings">Go to page 2</a>
</ion-content>
</ion-view>

Page2.html

<ion-view title="Page 2" hide-back-button="true">
<ion-content>
<div class="list list-inset">
    <p>This is page 2</p>
    <button class="button button-block button-positive" ng-click="goToHome();">Move back to Page 1</button>
</div>
</ion-content>
</ion-view>