AngularJS 中的移动后退按钮与 Cordova/PhoneGap 不起作用答案

【问题标题】：Mobile backbutton in AngularJS with Cordova/PhoneGap not workingAngularJS 中的移动后退按钮与 Cordova/PhoneGap 不起作用
【发布时间】：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.....另一个学习练习:-(

标签： javascript android angularjs cordova phonegap-plugins

【解决方案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>

【讨论】：