Use $state.go('login') is android hardware back button not working


#1

app.js

.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state(‘login’, {
url: ‘/login’,
controller: ‘LoginController’,
templateUrl: ‘app/components/login/login.html’
})
.state(‘sidemenu’, {
url: ‘/sidemenu’,
abstract: true,
templateUrl: ‘app/shared/sidemenu/sidemenu.html’,
controller: ‘SideMenuController’
})
.state(‘sidemenu.home’, {
url: ‘/home’,
views: {
‘menuContent’: {
templateUrl: ‘app/components/home/home.html’,
controller: ‘HomeController’
}
}
});
$urlRouterProvider.otherwise(’/login’);
})
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
});

Login.js $scope.loginButtonClick= function() { $state.go('sidemenu.home'); }


home.js
not Code


sidemenu.js
$scope.logOutButtonClick = function() {
$state.go(‘login’);
}

Android
App Lunch > Login ( HardWare Back Button is Working, OK)

but
App Lunch > Login > Home > openSidemenu and button click > Login (HardWare Back Button is Not Working…)


#2

can you replace it with navigator.app.backHistory(); rather than $ionicHistory.goBack(); and try it again…


#3

Sorry… edit my source… but still not working…
i think … may be…abstract issue…?


#4

maybe it’s because of your routing…


#5

code change…
app.js

angular.module(‘GnMobile’, [‘ionic’,‘ngCordova’])

.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider

.state('login', {
	url: '/login',
	controller: 'LoginController',
	templateUrl: 'app/components/login/login.html'
})

.state('sidemenu', {
	url: '/sidemenu',
	abstract: true,
	templateUrl: 'app/shared/sidemenu/sidemenu.html',
	controller: 'SideMenuController'
})

.state('sidemenu.home', {
	url: '/sidemenu/home',
	views: {
		'menuContent': {
			templateUrl: 'app/components/home/home.html',
			controller: 'HomeController'
		}
	}
});

$urlRouterProvider.otherwise('/login');

})

.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});

});


#6

your side menu is a different page? it should not be in the routing…


#7

my page

-Login
-Sidemenu
       l- home
       l- otherPage

this… different page?


#8

ah i see your sidemenu is like the home page when login is success… probably you should create a codepen for that it is hard to see what is wrong with your routing…


#9

so… codepen test…

this source code not wrong…
and
codepen is not hardware back button…

can not backbutton test …T_T


#10

make a nav back button first before the hardware back button… is there a nav back button in your navigation bar? if yes is it working also or not?


#11

this motion video


#12

where is your code in registerbackbutton? can you delete that or comment and try it again?


#13

CodePen Make Backbutton is working…

html

<title>Side Menus</title>

<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<ion-nav-view></ion-nav-view>
<script id="templates/event-menu.html" type="text/ng-template">
  <ion-side-menus enable-menu-with-back-views="false">

    <ion-side-menu-content>
      <ion-nav-bar class="bar-positive">
        <ion-nav-back-button>
        </ion-nav-back-button>

        <ion-nav-buttons side="left">
          <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
          </button>
        </ion-nav-buttons>
      </ion-nav-bar>

      <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content> 

    <ion-side-menu side="left">
      <ion-header-bar class="bar-assertive">
        <i class="icon ion-person">
	</i>
	<h1 class="title">admin</h1>
	<div class="buttons">
		<button class="button icon ion-log-out" ng-click="sendLogOut()">
		</button>
	</div>
      </ion-header-bar>
      <ion-content>
        <ul class="list">
          <!-- Note each link has the 'menu-close' attribute so the menu auto closes when clicking on one of these links -->
          <a href="#/event/check-in" class="item" menu-close>Check-in</a>
          <a href="#/event/attendees" class="item" menu-close>Attendees</a>
        </ul>
      </ion-content>
    </ion-side-menu>

  </ion-side-menus>
</script>

<script id="templates/home.html" type="text/ng-template">
  <ion-view view-title="Welcome">
    <ion-content class="padding">
      <p>Swipe to the right to reveal the left menu.</p>
      <p>(On desktop click and drag from left to right)</p>
    </ion-content>
  </ion-view>
</script>

<script id="templates/check-in.html" type="text/ng-template">
  <ion-view view-title="Event Check-in">
    <ion-content>
      <form class="list" ng-show="showForm">
        <div class="item item-divider">
          Attendee Info
        </div>
        <label class="item item-input">
          <input type="text" placeholder="First Name" ng-model="attendee.firstname">
        </label>
        <label class="item item-input">
          <input type="text" placeholder="Last Name" ng-model="attendee.lastname">
        </label>
        <div class="item item-divider">
          Shirt Size
        </div>
        <ion-radio ng-repeat="shirtSize in shirtSizes"
                   ng-value="shirtSize.value"
                   ng-model="attendee.shirtSize">
          {{ shirtSize.text }}
        </ion-radio>
        <div class="item item-divider">
          Lunch
        </div>
        <ion-toggle ng-model="attendee.vegetarian">
          Vegetarian
        </ion-toggle>
        <div class="padding">
          <button class="button button-block" ng-click="submit()">Checkin</button>
        </div>
      </form>

      <div ng-hide="showForm">
        <pre ng-bind="attendee | json"></pre> 
        <a href="#/event/attendees">View attendees</a>
      </div>
    </ion-content>
  </ion-view>
</script>

<script id="templates/attendees.html" type="text/ng-template">
  <ion-view view-title="Event Attendees">
    <ion-content>
      <div class="list">
        <ion-toggle ng-repeat="attendee in attendees | orderBy:'firstname' | orderBy:'lastname'"
                    ng-model="attendee.arrived"
                    ng-change="arrivedChange(attendee)">
          {{ attendee.firstname }}
          {{ attendee.lastname }}
        </ion-toggle>
        <div class="item item-divider">
          Activity
        </div>
        <div class="item" ng-repeat="msg in activity">
          {{ msg }}
        </div>
      </div>
    </ion-content>
  </ion-view>
</script>


css
body {
cursor: url(‘http://ionicframework.com/img/finger.png’), auto;
}

js
angular.module(‘ionicApp’, [‘ionic’])

.config(function($stateProvider, $urlRouterProvider) {

$stateProvider
.state(‘main’, {
url: “/main”,
templateUrl: “main.html”,
controller:“mainController”
})
.state(‘eventmenu’, {
url: “/event”,
abstract: true,
templateUrl: “templates/event-menu.html”,
controller: “eventController”
})
.state(‘eventmenu.home’, {
url: “/home”,
views: {
‘menuContent’ :{
templateUrl: “templates/home.html”
}
}
})
.state(‘eventmenu.checkin’, {
url: “/check-in”,
views: {
‘menuContent’ :{
templateUrl: “templates/check-in.html”,
controller: “CheckinCtrl”
}
}
})
.state(‘eventmenu.attendees’, {
url: “/attendees”,
views: {
‘menuContent’ :{
templateUrl: “templates/attendees.html”,
controller: “AttendeesCtrl”
}
}
})

$urlRouterProvider.otherwise("/main");
})
.controller(‘mainController’, function($scope, $state, $ionicHistory) {
$scope.sendLogin = function(){
$state.go(‘eventmenu.home’);
};
$scope.myGoBack = function() {
window.history.back();
};
})
.controller(‘eventController’, function($scope, $state) {
$scope.sendLogOut = function(){
$state.go(‘main’);
};
})
.controller(‘MainCtrl’, function($scope, $ionicSideMenuDelegate) {
$scope.attendees = [
{ firstname: ‘Nicolas’, lastname: ‘Cage’ },
{ firstname: ‘Jean-Claude’, lastname: ‘Van Damme’ },
{ firstname: ‘Keanu’, lastname: ‘Reeves’ },
{ firstname: ‘Steven’, lastname: ‘Seagal’ }
];

$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
})

.controller(‘CheckinCtrl’, function($scope) {
$scope.showForm = true;

$scope.shirtSizes = [
{ text: ‘Large’, value: ‘L’ },
{ text: ‘Medium’, value: ‘M’ },
{ text: ‘Small’, value: ‘S’ }
];

$scope.attendee = {};
$scope.submit = function() {
if(!$scope.attendee.firstname) {
alert(‘Info required’);
return;
}
$scope.showForm = false;
$scope.attendees.push($scope.attendee);
};

})

.controller(‘AttendeesCtrl’, function($scope) {

$scope.activity = [];
$scope.arrivedChange = function(attendee) {
var msg = attendee.firstname + ’ ’ + attendee.lastname;
msg += (!attendee.arrived ? ’ has arrived, ’ : ’ just left, ');
msg += new Date().getMilliseconds();
$scope.activity.push(msg);
if($scope.activity.length > 3) {
$scope.activity.splice(0, 1);
}
};

});


#14

did you use the register back button in app.js ??


#15

now test
app.js

but…
Login > home > opensideMenu > logoutButton click
still not working , not alert ddd

.run(function($ionicPlatform) { $ionicPlatform.registerBackButtonAction(function (event) { alert("ddd"); }, 100); $ionicPlatform.ready(function() { if(window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); cordova.plugins.Keyboard.disableScroll(true); } if(window.StatusBar) { StatusBar.styleDefault(); } }); });

#16

can you replace it with this:

$ionicPlatform.registerBackButtonAction(function () {
  		if($state.current.name=="main"){
			alert("Login");
        }
		else 
		{ 
     		navigator.app.backHistory();
     		//$ionicNativeTransitions.transition('back');
    	}
  	}, 100);

where main is your login page state name…


#17

so… login page name is login

.run(function($ionicPlatform, $state) {
// $ionicPlatform.registerBackButtonAction(function (event) {
// alert(“ddd”);
// }, 100);
$ionicPlatform.registerBackButtonAction(function () {
if($state.current.name==“login”){
alert(“Login”);
}
else
{
navigator.app.backHistory();
//$ionicNativeTransitions.transition(‘back’);
}
}, 100);
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
});

App Lunch > Login > Click BackButton : is working

but

App Lunch > Login > Home > open SideMenu > Logout Button > Login > Click Back Button : still not working… T^T

this test video


#18

check the console.log or maybe you need to create new project with side menu… you can check the routing in that project


#19

i create simple project
ionic start sidemenu sidemenu

and main page > search page

but

still not working back button…

this project code
simple default ionic sidemenu project
https://drive.google.com/open?id=0B2duYSmuDan-eURQdVdHY01tSzg


#20

ill check it… still downloading…