Angular JS & Phonegap back button event

Question

Angular JS & Phonegap back button event

I have a MainCtrl containing a backstack for history, like this;

$scope.urlHistory = [];

$scope.$on('$routeChangeSuccess', function () {
    if ($location.$$absUrl.split('#')[1] !== $scope.urlHistory[$scope.urlHistory.length - 1]) {
        $scope.urlHistory.push($location.$$absUrl.split('#')[1]);
    }
});

Then, in the same controller I've got a GoBack() function I'd like to call when the back button is pressed;

$scope.goBack = function () {
    $scope.urlHistory.pop();
    $location.path($scope.urlHistory[$scope.urlHistory.length - 1]);
};

This is supposed to work because from my index.html I call it with ng-click="goBack()" and everything works as expected.

I use this for the device events, same controller;

function onBackKeyDown() {
  alert("back");
  $scope.goBack();
}

document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
  // Register the event listener
  alert("deviceready");
  document.addEventListener("backbutton", onBackKeyDown, false);
};

I can see the alerts, but the app's not navigating back. Something happens though, because if I press the device back button twice, the ng-click="goBack()" suddenly takes me back to the start page of the app. Am I using $scope wrong? Experiencing this on Win Phone & Android. Using Phonegap Build.

edit: What I'm really after here is why would my $scope.goBack(); function work differently when called from the devicelistener.

angularjs
cordova

Answer 1

You should be able to just use the browser's built-in history object for this. For example:

function onDeviceReady() {
    document.addEventListener("backbutton", function () {
        window.history.go(-1);
    });
}

You shouldn't need to do anything specific just because you're using angular. Unless I'm missing something else...

UPDATE: After looking at the phonegap docs, it looks like the default backbutton behavior already does what you want... or are you trying to do something special?

Answer 2

This solved it:

  $scope.goBack = function () {
    if (urlHistory == '/') { 
      document.removeEventListener("backbutton", onBackKey, false);

    };    
    urlHistory.pop();
    $location.path(urlHistory[urlHistory.length - 1]);
    $scope.$apply();
  };

The scope.$apply(); was my answer. It's necessary when executing angular expressions outside of angular. (AngularJS $location not changing the path)