AngularJS 中的移动后退按钮与 Cordova/PhoneGap 不起作用
Posted
技术标签:
【中文标题】AngularJS 中的移动后退按钮与 Cordova/PhoneGap 不起作用【英文标题】：Mobile backbutton in AngularJS with Cordova/PhoneGap not working 【发布时间】：2015-04-10 12:01:16 【问题描述】：我正在使用 Cordova/PhoneGap 开发我的第一个 android AngularJS 移动应用程序。我在脚本文件中添加了以下代码，但无法捕获后退按钮事件。这是我的 scripts.js 中的内容：
var app = angular.module('QFA', []);
app.controller('QFAinit', function( $scope, $window )
document.addEventListener("deviceready", onDeviceReady(), false);
function onDeviceReady()
$window.alert("Device Ready-1");
document.addEventListener("backbutton", onBackKeyDown, false);
$window.alert("Device Ready-2");
function onBackKeyDown()
$window.alert("Inside onBackKeyDown1");
);
我这样称呼它：
<body ng-controller="QFAinit">
当我运行应用程序时，我确实收到“设备就绪 1”和“设备就绪 2”警报。这意味着 deviceready 事件被正确触发，并且还尝试了后退按钮。但是，当我按下后退按钮时，没有任何反应，而是执行默认行为，即应用程序退出。
另一方面，如果我在 eventlistener 命令上将 onBackKeyDown 替换为 onBackKeyDown()，那么我会在加载应用程序时收到“Inside onBackKeyDown1”警报，就在上述两个警报之后。但是一旦加载了应用程序，后退按钮功能就不存在了。
我怎样才能做到这一点？
更新
我意识到我需要包含 cordova.js 来捕获后退按钮。一旦我添加了它，后退按钮就会被困住。但是，结果我得到了一个损坏的应用程序，如下所示：
我还尝试将 jQuery 的版本从 2.1 更改为 1.11、1.10 和 1.4.5，但这没有任何影响。事实上，即使我删除了 jQuery，我仍然会得到损坏的界面。
【问题讨论】：
括号是始终显示还是仅在您按下后退按钮时显示？您的控制台中有错误，我建议您安装 Eclipse 以从 logcat 中读取，这样您就可以知道您的应用程序出了什么问题。 如果我添加cordova.js，它们总是会显示。当 cordova.js 被删除时，它们就会消失。 Eclipse.....另一个学习练习:-( 【参考方案1】：如果我提醒正确，移动设备上的警报框是异步的。该应用程序可能没有时间显示警报框，因为它已经关闭。如果您执行console.log，您可以在 Eclipse logcat 中阅读它吗？或者如果你做了一个阻止默认设置，它应该阻止关闭应用程序：
function onBackKeyDown(event)
event.preventDefault();
$window.alert("Inside onBackKeyDown1");
【讨论】：
警报必须停止所有正在运行的东西。它曾经与我使用 PhoneGap+JQueryMobile 构建的以前版本的应用程序一起使用。我正在使用 PhoneGap 在 AngularJS 中重新开发相同的应用程序，但它在这里不起作用。我认为使用最新的 Cordova 不再需要 preventDefault。但我也试过了，但没有成功。抱歉，我没有使用 Eclipse 并在命令行上工作。 Mobile 和 Ripple Emulator 中的行为相同。 请参阅上面的更新。谢谢@Ricconnect【参考方案2】：以下是最终对我有用的方法，将所有这些放在部分中。虽然它也适用于身体。不再是控制器了。
<link rel="stylesheet" href="js/bootstrap.min.css">
<link rel="stylesheet" href="js/bootstrap-theme.min.css">
<script src="js/jquery-1.11.2.min.js"></script>
<script src="cordova.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady(), false);
function onDeviceReady()
document.addEventListener("backbutton", onBackKeyDown, true);
function onBackKeyDown()
alert('Back Button Pressed');
resp = confirm("If you use Home key to exit, the App will remain active. Still want to Quit?");
if (resp === true)
navigator.app.exitApp();
</script>
<script src="js/angular.min.js"></script>
<script src="js/angular-resource.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="app.js"></script>
【讨论】：
以上是关于AngularJS 中的移动后退按钮与 Cordova/PhoneGap 不起作用的主要内容，如果未能解决你的问题，请参考以下文章
使用 AngularJS/Javascript 仅禁用浏览器后退按钮导航（不是应用程序中的链接）
如何让后退按钮与 AngularJS ui-router 状态机一起使用？