如何覆盖ionic中的默认后退按钮
how to override the default back button in ionic
我有播放列表、播放列表和媒体播放器三个视图。
在我的项目中,我默认使用返回按钮。我正在调试一个 Play 商店应用程序,我查看页面的方向是播放列表--> 播放列表--> 媒体 player.Also 我有单独的控制器用于所有视图,但我只在播放列表和媒体播放器页面中获得默认后退按钮。
1).点击播放列表页面的后退按钮进入播放列表页面,所以没有问题。
2).点击媒体播放器页面中的后退按钮会转到播放列表页面,但我需要转到播放列表。
这里有一些我已经浏览过的链接,但我无法理解
Soft navigation bar button - override $rootScope.$ionicGoBack()
Hard Android button - use $ionicPlatform.registerBackButtonAction()
1).
2).https://github.com/driftyco/ionic/issues/399
3).https://forum.ionicframework.com/t/how-to-handle-a-click-on-the-generated-back-button/582
请解释一下如何覆盖 $ionicGoBack()。在我的例子中,如何找到天气是软导航栏按钮或硬 Android 按钮。
当我在页面媒体播放器的后退按钮上提供检查元素时,我得到了这个
<button ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item" tabindex="0">
<i class="icon ion-ios-arrow-back"></i>
<span class="back-text" style="transform: translate3d(0px, 0px, 0px);">
<span class="default-title">Back</span>
<span class="previous-title hide">Home</span>
</span></button>
我会参考我的回答
It is possible to override both buttons in your controller, without any changes the the HTML code.
To summarise:
- Soft navigation bar button - override
$rootScope.$ionicGoBack()
- Hard Android button - use
$ionicPlatform.registerBackButtonAction()
在您的情况下,您想知道 $ionicGoBack()
是软后退按钮还是硬后退按钮。如上所述,“软导航栏按钮”就是通过这种方法处理的。
“硬 Android 按钮”由不同的方法处理:registerBackButtonAction()
。
如果我理解正确,您想要覆盖媒体播放器页面上的所有返回行为,并将用户发送到播放列表页面,即您只想返回 1 级(这是正常的 Android行为)。
这需要覆盖两个按钮,这是我在 link.
上详细解释的内容
我创建了一个名为 doCustomBack()
的新方法,它被两个覆盖的处理程序调用。这是您要用于导航到播放列表页面的方法:
// run this function when either hard or soft back button is pressed
var doCustomBack = function() {
console.log("custom BACK");
};
接下来的代码将为您覆盖默认软按钮,指向新的 doCustomBack()
方法:
// 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();
});
,更多link相关资源。
我有播放列表、播放列表和媒体播放器三个视图。
在我的项目中,我默认使用返回按钮。我正在调试一个 Play 商店应用程序,我查看页面的方向是播放列表--> 播放列表--> 媒体 player.Also 我有单独的控制器用于所有视图,但我只在播放列表和媒体播放器页面中获得默认后退按钮。
1).点击播放列表页面的后退按钮进入播放列表页面,所以没有问题。
2).点击媒体播放器页面中的后退按钮会转到播放列表页面,但我需要转到播放列表。
这里有一些我已经浏览过的链接,但我无法理解
Soft navigation bar button - override $rootScope.$ionicGoBack()
Hard Android button - use $ionicPlatform.registerBackButtonAction()
1).
3).https://forum.ionicframework.com/t/how-to-handle-a-click-on-the-generated-back-button/582
请解释一下如何覆盖 $ionicGoBack()。在我的例子中,如何找到天气是软导航栏按钮或硬 Android 按钮。
当我在页面媒体播放器的后退按钮上提供检查元素时,我得到了这个
<button ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item" tabindex="0">
<i class="icon ion-ios-arrow-back"></i>
<span class="back-text" style="transform: translate3d(0px, 0px, 0px);">
<span class="default-title">Back</span>
<span class="previous-title hide">Home</span>
</span></button>
我会参考我的回答
It is possible to override both buttons in your controller, without any changes the the HTML code.
To summarise:
- Soft navigation bar button - override
$rootScope.$ionicGoBack()
- Hard Android button - use
$ionicPlatform.registerBackButtonAction()
在您的情况下,您想知道 $ionicGoBack()
是软后退按钮还是硬后退按钮。如上所述,“软导航栏按钮”就是通过这种方法处理的。
“硬 Android 按钮”由不同的方法处理:registerBackButtonAction()
。
如果我理解正确,您想要覆盖媒体播放器页面上的所有返回行为,并将用户发送到播放列表页面,即您只想返回 1 级(这是正常的 Android行为)。
这需要覆盖两个按钮,这是我在 link.
上详细解释的内容我创建了一个名为 doCustomBack()
的新方法,它被两个覆盖的处理程序调用。这是您要用于导航到播放列表页面的方法:
// run this function when either hard or soft back button is pressed
var doCustomBack = function() {
console.log("custom BACK");
};
接下来的代码将为您覆盖默认软按钮,指向新的 doCustomBack()
方法:
// 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();
});