离子覆盖特定控制器的所有后退按钮行为 [英] Ionic override all BACK button behaviour for specific controller
问题描述
我希望能够覆盖导航栏上的 BACK 按钮和硬件按钮.
I want to be able to override the BACK button on the navigation bar, and the hardware button.
我希望此覆盖适用于一个特定的控制器，而不适用于其他控制器.
I want this override to be for one specific controller, but not for the rest of the controllers.
- 当用户移动到另一个屏幕时必须取消它
(使用ionic v1.0.0 uranium-unicorn)
(using ionic v1.0.0 uranium-unicorn)
我的原因是我有一个项目清单.单击列表会打开一个详细信息页面，其中包含 3 个选项卡.每个标签共享同一个控制器.
My reason is I have a list of items. Clicking on the list opens a details page, with 3 tabs. Each tab shares the same controller.
但是，在任何这些选项卡上按 BACK 必须返回主列表.这就是它在本机设备上的工作方式，所以这就是我希望它在我的混合应用程序上工作的方式.
However, pressing BACK on any of those tabs must go back to the main list. That is how it works on native devices, so that is how I would like it to work on my hybrid app.
许多在线提供的解决方案似乎是针对较旧的 Beta 版本，或者是针对控制器之外的注册.
Many solutions provided online seem to be for older beta versions, or for registration outside of controllers.
使用控制器内的 Android 硬件按钮的常见解决方案是:
A common solution for working with the Android hardware button inside a controller is:
$ionicPlatform.registerBackButtonAction(function (event) {
if($state.current.name=="home"){
alert("button back");
}
}, 100);
然而，这似乎不适用于软导航栏按钮，它适用于所有控制器，而不仅仅是一个.
However this doesn't seem to work on the soft navigation bar button, and it works across all controllers, not just the one.
推荐答案
可以覆盖控制器中的两个按钮，无需更改 HTML 代码.
It is possible to override both buttons in your controller, without any changes the the HTML code.
总结:
- 软导航栏按钮 - 覆盖
$rootScope.$ionicGoBack() - Android 硬按钮 - 使用
$ionicPlatform.registerBackButtonAction()
- Soft navigation bar button - override
$rootScope.$ionicGoBack() - Hard Android button - use
$ionicPlatform.registerBackButtonAction()
详细说明如下.
覆盖软导航栏后退按钮的解决方案来自于了解按下该按钮时 Ionic 的作用.
The solution for overriding the soft navigation bar BACK button comes from understanding what Ionic does when that button is pressed.
来自 ion-nav-back-button 的 Ionic 文档，我们已经知道:
From the Ionic docs for ion-nav-back-button, we already know that:
按钮在点击/点击时自动设置为 $ionicGoBack().
the button is automatically set to
$ionicGoBack()on click/tap.
在 ionic.bundle.js 中搜索源代码揭示了它是如何声明的:
Searching the source code in ionic.bundle.js reveals how this is declared:
$rootScope.$ionicGoBack = function(backCount) {
$ionicHistory.goBack(backCount);
};
在您自己的控制器中覆盖它很简单.确保将 $rootScope 传递到控制器中并修改上面的代码.最好获取指向原始函数的指针，以便在需要时恢复它，或者在完成自定义处理后调用它.
Overriding this in your own controller is simple. Make sure you pass $rootScope into the controller and just modify the above code. It is a good idea to grab a pointer to the original function so you can restore it if required, or call into it when finished with your custom processing.
// grab pointer to original function
var oldSoftBack = $rootScope.$ionicGoBack;
// override default behaviour
$rootScope.$ionicGoBack = function() {
// do something interesting here
// uncomment below line to call old function when finished
// oldSoftBack();
};
<小时>
覆盖Android硬件BACK按钮的解决方案，仅针对一个控制器，来自registerBackButtonAction()函数的返回值，该函数对覆盖.
The solution for overriding the Android hardware BACK button, for only one controller, comes from the return value of the registerBackButtonAction() function, which does the deregistration of the override.
在 $scope.$on('$destroy'... 处理程序中调用该注销方法.
Call that deregistration method in the $scope.$on('$destroy'... handler.
var doCustomBack= function() {
// do something interesting here
};
// registerBackButtonAction() returns a function which can be used to deregister it
var deregisterHardBack= $ionicPlatform.registerBackButtonAction(
doCustomBack, 101
);
$scope.$on('$destroy', function() {
deregisterHardBack();
});
此处有更多详细信息:
完整的解决方案需要以下内容:
A full solution would require the following:
- 覆盖软导航栏后退按钮
- 覆盖 Android 硬 BACK 按钮
- 范围将是单个控制器
- 恢复默认行为
以下代码说明了如何做到这一点:
The following code illustrates how this can be done:
// 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();
});
<小时>
这个问题已经在 Ionic 论坛上讨论过 &问题页面:
This issue has been discussed on the Ionic forums & issues pages:
这篇关于离子覆盖特定控制器的所有后退按钮行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
