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?
Related
What should happen when users click over back button of phone? In case when modal opens.
Registered a back button:
// To prevent interference with ionic's own backbutton handling
// you can subscribe with a low priority instead
this.platform.backButton.subscribe(() => {
// code that is executed when the user pressed the back button
// and ionic doesn't already know what to do (close modals etc...)
self.modalController.dismiss();
});
The problem with the code:
It closes/dismiss modal is fine!
But it also pushed back the page from where the modal is opened. Means it pop the page behind modal.
This should not happen the page should not pop - only modal should close.
Check the image gif added ->
Click here to see the problem
You may consider using platform.backButton.subscribeWithPriority() with a high priority (ex: 9999).
Then checking if there is a opened modal with modalController.getTop().
constructor(private modalCtrl: ModalController, private nav: NavController) {
}
ngOnInit() {
this.platform.backButton.subscribeWithPriority(9999, () => {
this.closeModalOrPage();
});
}
async closeModalOrPage(){
let modal = await this.modalCtrl.getTop();
if (modal){
modal.dismiss();
} else {
this.nav.pop();
}
}
I would like to create a multiple step modal dialog - like a wizard. A series of screens that follow on from one another.
I'm using the code from NativeScript's site to display a modal (https://docs.nativescript.org/core-concepts/navigation#modal-pages)
var modalPageModule = "./modal-views-demo/login-page";
var context = "some custom context";
var fullscreen = true;
mainPage.showModal(modalPageModule, context, function closeCallback(username, password) {
// Log the user in...
}, fullscreen);
The code works, but I'm unsure how to change the modalPageModule once the modal is displayed.
Possible duplicate
Nativescript: How to use navigation in modals
https://github.com/NativeScript/NativeScript/issues/3753
There are questions about overriding the physical Android BACK button in Ionic, to provide custom behaviour:
Ionic override all BACK button behaviour for specific controller
Ionic: How to override back button function?
But how do you cancel the override to restore default behaviour?
I have tried changing the priority of the handler, in the hope that a default handler may have a higher priority.
var customBackButton = function() {
console.log("this is custom behaviour");
};
$ionicPlatform.registerBackButtonAction(
customBackButton, 101
);
$scope.$on('$destroy', function() {
$ionicPlatform.registerBackButtonAction(
customBackButton, 0
);
});
This does not work.
Ionic v1 solution (out of date)
According to the Ionic docs for $ionicPlatform, the registerBackButtonAction() returns:
A function that, when called, will deregister this backButtonAction.
This can be seen in the code for registerBackButtonAction():
// return a function to de-register this back button action
return function() {
delete self. [action.id];
};
So the correct way to deregister / cancel the custom behaviour is to call that function when the controller is destroyed:
var customBackButton = function() {
console.log("this is custom behaviour");
};
// registerBackButtonAction() returns a function which can be used to deregister it
var deregisterBackButtonAction = $ionicPlatform.registerBackButtonAction(
customBackButton, 101
);
$scope.$on('$destroy', function() {
deregisterBackButtonAction();
});
A more complete example showing how to override & restore the hard and soft buttons can be found here:
Ionic override all BACK button behaviour for specific controller
I have created a Button with the Tiny Method addButton().
How is it possible to toggle the State of the Button ?
In my first simple case I have a Button with Fullscreen
(Different Functionality than the built-in function)
and want to hide it after getting the Fullscreen State
and replace it with an "End Fullscreen" Button.
But I have not found the right way to show or hide them.
I know that the button will get an ID, but I dont know which one ...
If you add the button with:
editor.addButton('customFullscreen', {
tooltip: 'Fullscreen',
shortcut: 'Ctrl+Alt+F',
onClick: toggleCustomFullscreen,
onPostRender: function() {
var self = this;
editor.on('CustomFullscreenStateChanged', function(e) {
if (e.state) {
self.name('Close fullscreen');
//self.active(e.state); // uncomment for "pressed" look
} else {
self.name('Fullscreen');
}
});
}
});
and handle the event with
var customFullscreenState = false;
function toggleFullscreen() {
customFullscreenState = !customFullscreenState;
if (customFullscreenState) {
// do something, we are active
} else {
// do something else, we're unactive
}
editor.fire('CustomFullscreenStateChanged', {state: fullscreenState});
}
You should be able to have it look like wo different button and do two different things depending on state, but it will still just be one button that changes action and text.
Modals are turning out to be more difficult than I thought :/
Got the modal loading up a view / view modal properly, clicking the save button saves the information (I do get a 'Should be Empty : []' from Q.js but apparently this isn't a problem?) the problem I am having is probably related to promises but if it is I can't find it.
Parent's view model -
var createNew = function () {
app.showModal(tfcreate).then(function (modalResult) {
if (!modalResult) { return false; }
var templateId = modalResult;
router.replaceLocation('#/templateformedit/' + templateId);
});
};
Modal's view model -
var cancel = function () {
this.modal.close(false);
};
var save = function () {
isSaving(true);
setRevisionInfo();
datacontext.saveChanges()
.then(alertMe)
.fail(initFailed)
.fin(complete);
function setRevisionInfo() {
templateForm().revisionLevel(1);
templateForm().createdById(shell.currentUser().id());
templateForm().lastRevisedId(shell.currentUser().id());
var nowDT = moment().format('LL');
templateForm().lastRevisedDT(nowDT);
templateForm().createdDT(nowDT);
}
function alertMe() {
return console.log('done'); // <<< This is firing ok
}
function complete() {
isSaving(false);
this.modal.close(templateForm().id()); // <<< Breakpoint reaches here just fine
}
};
If I press the cancel button which is bound back to cancel() it closes just fine, if I click the save button it hits save(), saves the object properly, and reaches all breakpoints but never closes. If after I save I press cancel it closes just fine again. I have tried calling cancel() during the complete() function and it reaches the statement, but again does not close. Any ideas???
Note : I can call router.replaceLocation from the modal and it will change the view just fine but the modal persists to the next view.
Edit : I added another button 'close' that is disabled until isSaving is finished and hasChanges is false and that lets me close it and everything just fine, but that shouldn't be necessary, right?
Per request:
Are you sure that this in complete() is still your vm context? Try var self=this; at the top of save() and in complete() self.modal.close(...)