LevelUp
September 1, 2015, 1:54pm
1
Hey,
I’m creating a very simple App with a “Go back” button, to go back to the previous view.
I tried using $ionicHistory.goBack() just like specified in the documentation, but I can’t seem to get it working.
Here is my code:
<button class="button button-block button-assertive" ng-click="goBackHandler()">
Go Back
</button>
And the controller code:
angular.module('starter.controllers', ['ionic'])
.controller('AppCtrl', function($scope, $ionicHistory)
{
$scope.goBackHandler = function()
{
$ionicHistory.goBack(); //This doesn't work
//window.history.back(); //This works
//alert('code to go back called. Did it work?'); //For testing
}
});
This should be textbook - What could I be doing wrong?
Here is a plunker - http://plnkr.co/edit/yJqdfs?p=info
same with me before, but right now i am use like this:
.controller('NavigationCtrl', function($scope, $location, $ionicHistory){
$scope.myGoBack = function() {
$backView = $ionicHistory.backView();
$backView.go();
};
$scope.go = function ( path ) {
$location.path( path );
};
});
Hope this work in your code too.
1 Like
LevelUp
September 1, 2015, 2:27pm
3
Hey,
thanks for the help. I tried out your snippet but I’m afraid it also doesn’t work.
Upon inspecting, I see that $ionicHistory.backView() always returns null for me
Now I’m trying to understand why.
Here is the updated Plunker with your code - http://plnkr.co/edit/tvXUXxseLxMiSgTugFP8?p=preview
AlexUA
November 24, 2015, 3:58pm
4
Do you use left menu in your application? If true you may notice that directive menu-close will close menu and clear your history. Use menu-toggle instead of menu-close.
10 Likes
This works for me. Thanks
##Alex ! you are a genius!
Thank you, also i add enable-menu-with-back-views=“true” in my menu to add back button into non direct childs of the navigation.
<ion-side-menus enable-menu-with-back-views="true">
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">Menu</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-toggle href="#/app/start">
Home
</ion-item>
<ion-item nav-clear menu-toggle href="#/app/contact">
Contact us
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
for me also $ionicHistory was not working<ui-view></ui-view><ion-nav-view></ion-nav-view>
its working fine now
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
<title></title>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAPU3y59ihAELaLjTWMNg89cCwvb6K2L8Q&libraries=places"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<style type="text/css">
.platform-ios .manual-ios-statusbar-padding{
padding-top:20px;
}
.manual-remove-top-padding{
padding-top:0px;
}
.manual-remove-top-padding .scroll{
padding-top:0px !important;
}
ion-list.manual-list-fullwidth div.list, .list.card.manual-card-fullwidth {
margin-left:-10px;
margin-right:-10px;
}
ion-list.manual-list-fullwidth div.list > .item, .list.card.manual-card-fullwidth > .item {
border-radius:0px;
border-left:0px;
border-right: 0px;
}
</style>
<!-- <script type=“text/javascript“ src=“http://maps.googleapis.com/maps/api/js?key=AIzaSyAPU3y59ihAELaLjTWMNg89cCwvb6K2L8Q&libraries=places“></script> -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
<script src="js/constants.js"></script>
<!-- <script src = "lib/ngCordova/dist/ng-cordova.min.js"></script> -->
<!-- Only required for Tab projects w/ pages in multiple tabs
<script src="lib/ionicuirouter/ionicUIRouter.js"></script>
-->
</head>
<body ng-app="app" controller="AppCtrl">
<!-- <ui-view></ui-view> -->
<ion-nav-view></ion-nav-view>
<!-- <ui-view></ui-view> -->
<!-- <script type=“text/javascript“ src=“http://maps.googleapis.com/maps/api/js?key=AIzaSyAPU3y59ihAELaLjTWMNg89cCwvb6K2L8Q&libraries=places“></script> -->
<!-- <script src="https://maps-api-ssl.google.com/maps/api/js?libraries=places"></script> -->
</body>
</html>
rriche
October 19, 2016, 10:28pm
8
If all else fails:
$scope.GoBack = function() {
7 Likes
thanks a lot you are helpful, it works great
disak
March 22, 2017, 10:35am
12
$ionicGoBack()
<button class="button button-float" ng-click="$ionicGoBack()">
<i class="icon ion-ios-arrow-back"></i>
</button>
thank you very very very much…My problem is solved easily…thank you thank you thank you so much
Heyy,I cant’ go back on press key on mobile…that time what I do…please suggest me
Thanks a lot! this save me, a lot of people seem to have the same problem.
Omg, this solved my problem very very easy. TKS
