Angularjs + phonegap 注销历史记录答案

【问题标题】：Angularjs + phonegap logout on history backAngularjs + phonegap 注销历史记录
【发布时间】：2013-08-06 12:54:50
【问题描述】：

我已经使用 angularjs 1.1.5 创建了一个移动 phonegap 应用程序

在应用程序运行时，会显示一个登录表单。登录成功后，用户被重定向到新的“/accounts/profile”网址（ProfileCtrl 控制器）。

在每个页面上（位于“/accounts/login”的登录表单旁边），都有一个返回按钮位于屏幕的左上角。

整个应用程序都绑定到“AppCtrl”控制器（以及带有提到的后退按钮的顶栏）。应用程序的其余部分与 ng-view 指令相关联，每个指令都有单独的控制器。

后退按钮是在 AppCtrl 控制器中定义的函数，只需返回 window.history.back()

我需要禁用配置文件页面上的window.history.back()（成功登录后显示的），位于绑定到 ProfileCtrl 控制器的“/accounts/profile” . 相反，使用用户应该被注销。（为了简单起见，我在这里省略了注销确认）。这同样适用于点击手机的后退按钮。

目前，我正在使用 ProfileCtrl 中的$scope.$parent.goBack() = logout() 从子作用域更改goBack() 函数。但我不知道如何将它绑定到物理后退按钮。

【问题讨论】：

标签： javascript angularjs cordova

【解决方案1】：

要绑定到物理后退按钮，您可以使用：

document.addEventListener("backbutton", $scope.goBack, false);

为此，您需要在控制器中使用 Angular $window 和 $location 服务的组合。我建议不要覆盖您的 $parent 范围函数，因为您可能会在另一个页面上出现奇怪的行为。另外，请注意您不允许在 iOS 设备上退出或暂停您的应用程序。请参阅下面的一些示例代码：

var AppCtrl = ['$scope', '$window', '$location', '$timeout', '$notification', '$rootScope', function ($scope, $window, $location, $timeout, $notification, $rootScope) {
'use strict';

// Somewhere inside AppCtrl
$scope.checkExit = function () {

    // https://stackoverflow.com/questions/14422908/iphone-does-not-recognize-phonegaps-navigator-app
    // fack!!!
    if ($location.path() == '/home' && !$scope.isIOS) {
        $notification.confirm("Exit application?", function(result) {
            if ($window.isPhoneGap && result == 1) {
                $rootScope.$broadcast('appExit');  // ga tracking
                navigator.app.exitApp();
            }
        });
        return true;
    }

    return false;
};

$scope.goBack = function (evt) {
    if (evt != null) {
        if (evt.preventDefault) {
            evt.preventDefault();
        }
    }

    if (!$scope.checkExit()) {
        $window.history.back();
    }
};

document.addEventListener("backbutton", $scope.goBack, false);

}]; // End AppCtrl 

// in some other file, I have $notification friendly factory
app.factory('$notification', ['$rootScope', '$window', function ($rootScope, $window) {
  return {
     alert: function(message) {
         if (!$window.isPhoneGap) {
             $window.alert(message);
             return;
         }

         navigator.notification.alert(message, null, '', 'OK');
     },
     confirm: function (message, callbackFn, title, buttonLabels) {
         if (buttonLabels == null) {
             buttonLabels = 'OK,Cancel';
         }

         if (!$window.isPhoneGap) {
             callbackFn($window.confirm(message) ? 1 : 2);
             return;
         }

         navigator.notification.confirm(
                 message,       // message
                 callbackFn,    // callback to invoke with index of button pressed
                 title,         // title
                 buttonLabels.split(',')   // buttonLabels
             );
     },
     prompt: function (message, callbackFn, title, defaultText, buttonLabels) {
         if (buttonLabels == null) {
             buttonLabels = 'OK,Cancel';
         }
         if (defaultText == null) {
             defaultText = '';
         }

         if (!$window.isPhoneGap) {
             var answer = $window.prompt(message, defaultText);
             callbackFn({
                 buttonIndex: (answer ? 1 : 2),
                 input1: answer
             });
             return;
         }

         navigator.notification.prompt(
            message,        // message
            callbackFn,     // callback to invoke
            title,          // title
            buttonLabels.split(','),
            defaultText
        );
     }
  };
}]);

我在此代码示例中提前设置了 window.isPhoneGap ondeviceready：navigator.connection.type not working even if device is ready *or* device is never ready

【讨论】：