带有Cordova / PhoneGap的AngularJS中的移动后退按钮不起作用

Question

我正在使用Cordova / PhoneGap开发我的第一个Android AngularJS移动应用程序。 我在脚本文件中添加了以下代码，但无法捕获backbutton事件。 这是我的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">

当我运行该应用程序时，确实收到“ Device Ready-1”和“ Device Ready-2”警报。 这意味着deviceready事件正在正确触发，并且还尝试了后退按钮。 但是，当我按下后退按钮时，什么都没有发生，而是执行默认行为，即应用程序退出。

另一方面，如果我在eventlistener命令上将onBackKeyDown替换为onBackKeyDown（），则在加载应用程序时会立即在上述两个警报之后立即收到“ Inside onBackKeyDown1”警报。 但是，一旦加载了应用程序，便没有后退功能。

我怎样才能做到这一点？

更新

我意识到我需要包含cordova.js来捕获后退按钮。 添加完后，后退按钮确实会被困住。 但是，结果是我得到了一个损坏的应用程序，如下所示：

在此输入图像描述

我还尝试将jQuery的版本从2.1更改为1.11、1.10和1.4.5，但这没有任何影响。 实际上，即使我删除了jQuery，我仍然会得到损坏的界面。

Answer 1

如果我没有正确提醒，是移动设备上的警报框是异步的。 应用可能没有时间显示警报框，因为它已经关闭。 如果执行console.log可以在Eclipse logcat中读取它吗？ 或者，如果您执行阻止默认设置，则应阻止关闭该应用程序：

 function onBackKeyDown(event) {
     event.preventDefault();
     $window.alert("Inside onBackKeyDown1");
 }

Answer 2

下面是最终对我有用的内容，将所有内容分节。 虽然它也会在Body中起作用。 不再是控制器了。

  <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>

带有Cordova / PhoneGap的AngularJS中的移动后退按钮不起作用

问题描述

更新

2 个解决方案

解决方案1
0 2015-02-10 13:20:57

解决方案2
0 2015-02-11 08:51:31

带有Cordova / PhoneGap的AngularJS中的移动后退按钮不起作用

问题描述

更新

2 个解决方案

解决方案1 0 2015-02-10 13:20:57

解决方案2 0 2015-02-11 08:51:31

解决方案1
0 2015-02-10 13:20:57

解决方案2
0 2015-02-11 08:51:31