According to the documentation (http://ionicframework.com/docs/api/controller/ionicModal/), the default behaviour is to close the current modal on back button. But it's not closing anything, instead, it performs the action of the main view, go back.
{boolean=} hardwareBackButtonClose: Whether the modal can be closed using the hardware back button on Android and similar devices. Default: true.
Here is my code when I initialize the modal:
$ionicModal.fromTemplateUrl('app/components/contacts/views/contacts.selectModal.html', {
scope: $scope,
animation: 'slide-in-up',
hardwareBackButtonClose: true
}).then(function(modal) {
$scope.contactSelect = modal;
});
I'm using Android 5.1, Ionic 1.2.1
Use $ionicModal option isShown() for recognize modal is open and close on tap hardwareBackButton
Work for me in Android Api 16
$ionicPlatform.registerBackButtonAction(function (event) {
if(vm.modal.isShown()) {
backModal();
} else {
window.history.back();
}
}, 999);
Related
In ionic framework,clicking back button to close app instead of going back to previous page.It is only happen in android 9.Work fine in other android version.
I already wrote these code in app.component.ts
this.platform.backButton.subscribe(() => {
if (this.router.isActive('/home', true) && this.router.url === '/home') {
navigator['app'].exitApp();
}
});
Here is the solution : in homepage.ts May be work
ionViewDidEnter(){
this.subscription = this.platform.backButton.subscribe(()=>{
navigator['app'].exitApp(); });
}
ionViewWillLeave(){
this.subscription.unsubscribe();
}
I am working in ionic when i install application in android device the hardware back button was not working, after some R & D i got solution to register back button i have done it. but my problem is when select option popover is open and i press back button then it dismiss the popover that's OK but when i want to reopen select option after pressing hardware back button i'm unable to open it. registering back button uses some condition to check active portals and dismiss the active portal if any found. but it does not allow to open select option again. can anyone help me to solve this issue? my code is below...
platform.ready().then(() => {
// this.config.pullVersion();
let ready = true;
// to handle hardware back button in android
platform.registerBackButtonAction(() => {
console.log("Back button action called");
let activePortal = ionicApp._loadingPortal.getActive() ||
ionicApp._modalPortal.getActive() ||
ionicApp._toastPortal.getActive() ||
ionicApp._overlayPortal.getActive();
let view = this.navCtrl.getActive();
if (activePortal) {
ready = false;
activePortal.dismiss();
activePortal.onDidDismiss(() => { ready = true; });
console.log("handled with portal");
return;
}
if (menuCtrl.isOpen()) {
menuCtrl.close();
console.log("closing menu");
return;
}
if (this.navCtrl.canGoBack()) {
this.navCtrl.pop();
console.log("poping back");
return;
} else {
console.log("exiting from app");
platform.exitApp();
console.log("poping back");
}
}, 1);
});
and select-option
<ion-select interface="popover" [disabled]="isStarted" [(ngModel)]="routeName" class="custom-option-btn" (ionChange)="optionsFn();">
<ion-option value="" selected disabled>select Route</ion-option>
<ion-option *ngFor="let cg of routeData;let idx = index" [value]="cg">{{cg.routeName}} </ion-option>
</ion-select>
this got dismissed in back button event and does not open select option again
ionicApp._overlayPortal.getActive()
I've been searching a lot about this topic, and Ionic Team hasn't developed a solution for this yet (I know it's been 3 years now). It seems that the only way we have to dismiss an ion-select is by using the 'cancel' button inside the selector.
Any other way, using platform.backbutton, or anything in IonicApp module won't let you do what you need.
The only real solution i can think about is creating a new Modal, only for the select, and implement your own scroll and selectable items, and then use ModalController.dismiss() to dismiss the select, as if you were pressing cancel inside the ion-select.
How can I prevent ionic keyboard from hiding when I press a specific button in my Ionic 1 app?
This solution doesn't work for me, the keyboard remains open wherever I click.
A possible solution can be found here (the same link sent by Sahil Dhir). I also had this problem and this solution worked for me.
The directive is:
angular.module('msgr').directive('isFocused', function($timeout) {
return {
scope: { trigger: '#isFocused' },
link: function(scope, element) {
scope.$watch('trigger', function(value) {
if(value === "true") {
$timeout(function() {
element[0].focus();
element.on('blur', function() {
element[0].focus();
});
});
}
});
}
};
});
Its usage is:
<input type="text" is-focused="true">
What it basically does is to watch the focus of the input and whenever the input loses focus (when you press a button on the screen outside the keyboard, for example) it rapidly assigns the focus back to it. So the keyboard doesn't have time to hide.
Hope it works for you too!
I need to override the back button function for both buttons:
the back icon on top left corner of nav-bar
the hardware back button (for example in android)
but only for one specific view, not globally. How can i do that?
It is possible to override the back button functionality for both buttons from within your controller. Here is the code for that:
// run this function when either hard or soft back button is pressed
var doCustomBack = function() {
console.log("custom BACK");
};
// override soft back
// framework calls $rootScope.$ionicGoBack when soft back button is pressed
var oldSoftBack = $rootScope.$ionicGoBack;
$rootScope.$ionicGoBack = function() {
doCustomBack();
};
var deregisterSoftBack = function() {
$rootScope.$ionicGoBack = oldSoftBack;
};
// override hard back
// registerBackButtonAction() returns a function which can be used to deregister it
var deregisterHardBack = $ionicPlatform.registerBackButtonAction(
doCustomBack, 101
);
// cancel custom back behaviour
$scope.$on('$destroy', function() {
deregisterHardBack();
deregisterSoftBack();
});
Make sure to inject $rootScope into the controller.
For more details and a proper explanation, see my full answer at related question:
Ionic override all BACK button behaviour for specific controller
This code is for android button, while the button on the navigation bar is a bit more simple:
Android button :
$ionicPlatform.registerBackButtonAction(function (event) {
if($state.current.name=="home"){
alert("button back");
}
}, 100);
Ionic button :
You can edit your topic and see how you have defined your menus and your views?
In my current usecase, I am trying to use angular-ui modal window to show the progress of calculations that we do in a background process which we disable on completion.
All works well. I just want to disable user from clicking any of element in background.
Any idea how can we do this?
You can pass the following options, when opening a modal window, to prevent users from closing the window:
backdrop: 'static' - top prevent users from closing a modal on backdrop click
keyboard: false - so users can't close a window by pressing ESC
Full documentation here: http://angular-ui.github.io/bootstrap/#/modal
I just want to add an example with code and extend pkozlowski.opensource answer,
Check this example:
var modalInstance = $modal.open({
templateUrl: '/views/registration/loginModal.html',
controller: LoginModalInstanceCtrl,
windowClass: 'login-modal-window',
resolve : {
credentials : function(){ return {email :'', password:''}; }
},
backdrop: 'static', /* this prevent user interaction with the background */
keyboard: false
});
modalInstance.result.then(function (res) {
}, function () {
/* cancel */
$state.go('home');
});