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

Question

J'ai une directive qui est l'en-tête du site avec un bouton de retour et je veux, en cliquant dessus, revenir à la page précédente. Comment puis-je le faire à la manière d'Angular ?

J'ai essayé :

{{title}}

et voici le fichier js de la directive :

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 d'angular.js sur $location mais je n'ai rien trouvé concernant le bouton de retour ou history.back().

Answer 1

Vous devez utiliser une fonction de lien dans votre directive :

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

Voir jsFiddle.

Answer 2

Les routes Angular surveillent l'emplacement du navigateur, donc il suffit d'utiliser simplement window.history.back() en cliquant sur quelque chose pour que ça fonctionne.

HTML:

Reculer!

JS:

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

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

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

Ensuite, n'importe où dans mon application je peux simplement faire Retour

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

Answer 3

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

Utilisez comme ceci:

Retour

Answer 4

Une autre solution agréable et réutilisable est de créer une directive comme ceci:

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

puis il suffit de l'utiliser comme ceci:

back

Answer 5

Si cela vous est utile... J'obtenais l'erreur "10 $digest() iterations reached. Aborting!" lorsque j'utilisais $window.history.back(); avec IE9 (fonctionne bien dans les autres navigateurs bien sûr).

J'ai réussi à le faire fonctionner en utilisant :

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