Comment implémenter history.back () dans angular.js

J'ai une directive qui est un en-tête de site avec un bouton de retour et je veux en cliquant sur pour revenir à la page précédente. Comment le faire de manière angulaire?

J'ai essayé:

<header class="title">
<a class="back" ng-class="icons"><img src="../media/icons/right_circular.png" ng-click="history.back()" /></a>
<h1>{{title}}</h1>
<a href="/home" class="home" ng-class="icons"><img src="../media/icons/53-house.png" /></a>   
</header>

et c'est la directive js:

myApp.directive('siteHeader', function () {
    return {
        restrict: 'E',
        templateUrl: 'partials/siteHeader.html',
        scope: {
            title: '@title',
            icons: '@icons'
        }
    };
});

mais rien ne se passe. J'ai regardé dans l'API angular.js à propos de $ location mais je n'ai rien trouvé sur le bouton de retour ou history.back().

Vous devez utiliser une fonction de lien dans votre directive:

link: function(scope, element, attrs) {
     element.on('click', function() {
         $window.history.back();
     });
 }

Voir jsFiddle .

Les itinéraires angulaires surveillent l'emplacement du navigateur, donc simplement en window.history.back()cliquant sur quelque chose fonctionnerait.

HTML:

<div class="nav-header" ng-click="doTheBack()">Reverse!</div>

JS:

$scope.doTheBack = function() {
  window.history.back();
};

Je crée généralement une fonction globale appelée «$ back» sur mon contrôleur d'application, que je place généralement sur la balise body.

angular.module('myApp').controller('AppCtrl', ['$scope', function($scope) {
  $scope.$back = function() { 
    window.history.back();
  };
}]);

Puis n'importe où dans mon application, je peux le faire <a ng-click="$back()">Back</a>

(Si vous voulez qu'il soit plus testable, injectez le service $ window dans votre contrôleur et utilisez $window.history.back()).

Idéalement, utilisez une directive simple pour garder les contrôleurs libres de $ window redondants

app.directive('back', ['$window', function($window) {
        return {
            restrict: 'A',
            link: function (scope, elem, attrs) {
                elem.bind('click', function () {
                    $window.history.back();
                });
            }
        };
    }]);

Utilisez comme ceci:

<button back>Back</button>

Une autre solution intéressante et réutilisable consiste à créer une directive comme celle-ci :

app.directive( 'backButton', function() {
    return {
        restrict: 'A',
        link: function( scope, element, attrs ) {
            element.on( 'click', function () {
                history.back();
                scope.$apply();
            } );
        }
    };
} );

alors utilisez-le simplement comme ceci:

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

Au cas où cela serait utile ... J'étais en train de frapper les "itérations de 10 $ digest () atteintes. Abandon!" erreur lors de l'utilisation de $ window.history.back (); avec IE9 (fonctionne bien dans d'autres navigateurs bien sûr).

Je l'ai fait fonctionner en utilisant:

setTimeout(function() {
  $window.history.back();
},100);

Ou vous pouvez simplement utiliser javascript code:

onClick="javascript:history.go(-1);"

Comme:

<a class="back" ng-class="icons">
   <img src="../media/icons/right_circular.png" onClick="javascript:history.go(-1);" />
</a>

Une erreur de syntaxe s'est produite. Essayez ceci et cela devrait fonctionner:

directives.directive('backButton', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function () {
                history.back();
                scope.$apply();
            });
        }
    }
});

Angulaire 4:

/* typescript */
import { Location } from '@angular/common';
// ...

@Component({
  // ...
})
export class MyComponent {

  constructor(private location: Location) { } 

  goBack() {
    this.location.back(); // go back to previous location
  }
}

Pour moi, mon problème était que je devais revenir en arrière, puis passer à un autre état. Donc, l'utilisation $window.history.back()n'a pas fonctionné parce que pour une raison quelconque, la transition s'est produite avant que history.back () ne se produise, j'ai donc dû envelopper ma transition dans une fonction de temporisation comme celle-ci.

$window.history.back();
setTimeout(function() {
  $state.transitionTo("tab.jobs"); }, 100);

Cela a résolu mon problème.

Dans AngularJS2, j'ai trouvé une nouvelle façon, c'est peut-être la même chose mais dans cette nouvelle version:

import {Router, RouteConfig, ROUTER_DIRECTIVES, Location} from 'angular2/router'; 

(...)

constructor(private _router: Router, private _location: Location) {}

onSubmit() {
    (...)
    self._location.back();
}

Après ma fonction, je peux voir que mon application va à la page précédente en utilisant l'emplacement d'angular2 / router.

https://angular.io/docs/ts/latest/api/common/index/Location-class.html