0

I'm having an issue developping my website in AngularJS during the implementation of the back and forward buttons.

// app.js
var app = angular.module('myApp', [])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/Page1', {
          templateUrl: 'partial/view1.html', controller: Ctrl1})
      .when('/Page2', {
          templateUrl: 'partial/view2.html', controller: Ctrl2})
      .otherwise({
          redirectTo: '/Page1'});
}]);

When I navigate from page 1 to page 2 I can't go back even using the following directive :

// app.js
app.directive('backButton', function(){
    return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                  element.bind('click', goBack);

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

-

<!-- view1.html / view2.html -->
<i class="fa fa-chevron-left" back-button></i>

Yet it works when I back on the same view. Is there a solution ?

Thanks

Edit: $window doesn't help either since I've tried changing my directive as such :

// app.js
app.directive('backButton', ['$window', function($window) {
    return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                  element.bind('click', goBack);

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

and got the same behavior.

Romain
  • 3,586
  • 7
  • 31
  • 52

1 Answers1

0

As Davin said in his comment, you have to use $window.history.back(); from the $window service. Don't forget to declare it as a dependency of your directive as such

directive('directiveName', ['$window', function($window) {
    ...
  }])

EDIT: the full working directive with no typo

app.directive('backButton', ['$window', function($window) {
    return {
            restrict: 'A',
            link: function(scope, element) {
                  element.bind('click', function() {
                     $window.history.back();
                  });
            }
    };
}]);
NicolasMoise
  • 7,261
  • 10
  • 44
  • 65
  • As I answered his comment, $window.history.back() has the same behavior than history.back() in my case. I'll edit my question. – Romain Nov 19 '13 at 15:34
  • Well you're missing a square bracket in your directive so that's probably why it's not working. I fixed your typo and tried out the directive exactly as you wrote it and it works just fine. Note: I'm using ui-router instead of ng-route but it shouldn't be a problem. – NicolasMoise Nov 19 '13 at 16:05
  • Actually there wasn't a missing bracket in my code, it's a mistake I made only on Stack Overflow (sorry guyz) I tested changing from ng-route to ui-router and that was it ! Thank you. – Romain Nov 19 '13 at 16:47
  • mmmh that is strange though, it should still work with ng-route (maybe you configured that wrong?). Anyway, I think ui-router is the better option. – NicolasMoise Nov 19 '13 at 18:14
  • Actually after I really tested it, It doesn't work properly even changing to ui-routes. I can forward and back but only on the same page not from one page to another keeping the arguments as they were. – Romain Nov 25 '13 at 09:30