AngularJS back button

Question

I'm working on making an Android app using Phonegap and AngularJS. I'm attempting to create a button to be used as both a "cancel" and a "back" button, that will essentially just hit the browser's 'back' button.

Here's some sample HTML for the cancel button:

<a href="#" ng-click="goBack()" class="button--cancel weight--bold vertical-align--middle text-center">cancel</a>

And here is the controller for that page, with the goBack() button:

function NewOccasionCtrl($scope, $window) {
    $scope.$window = $window;
    $scope.goBack = function() {
      $window.history.back();
    };
}

This throws no errors, but also doesn't work... the emulator remains on the same page. Without the $scope.$window = $window it throws an error. I was hoping to achieve a functional 'back' button without having to create/use a directive, because as far as I understand those then implement templating and things I don't need/want.

Is there a way to do this? Thanks

It makes no sense that $scope.$window = $window would be required. — Karen Zilles, Jun 13 '13 at 01:01
@KarlZilles then it probably isn't required... like I said, this doesn't work and I'm a bit confused as to how to approach this. — Jakemmarsh, Jun 13 '13 at 01:02

score 11 · Accepted Answer · answered Jun 14 '13 at 00:24

11

I went with using a Directive to make the back functionality reusable. Here is my final code:

HTML:

<a href back-button>back</a>

Javascript:

app.directive('backButton', function(){
    return {
      restrict: 'A',

      link: function(scope, element, attrs) {
        element.bind('click', goBack);

        function goBack() {
          history.back();
          scope.$apply();
        }
      }
    }
});

answered Jun 14 '13 at 00:24

Jakemmarsh

4,601
12
43
70

When i use this code i get a '$digest already in progress' error – PPPaul Mar 19 '14 at 16:23
@PPPaul you can try using the strategy discussed [here](http://stackoverflow.com/a/12859093/880859) to avoid that error – Jakemmarsh Mar 19 '14 at 18:52

score 3 · Answer 2 · answered Feb 04 '14 at 17:53

I had an issue like this using phonegap and angular, $window.history.back() would not work. So I created a workaround.

$scope.urlHistory = [];

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

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

Hope this help someone else.

AngularJS back button

2 Answers2