web-dev-qa-db-fra.com

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

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

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 voici 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é à propos du bouton de retour ou de history.back().

javascriptangularjs
187
baba-dev

Vous devez utiliser une fonction de lien dans votre directive:

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

Voir jsFiddle .

259
asgoth

Les routes angulaires surveillent l'emplacement du navigateur. Il suffit donc d'utiliser window.history.back() pour cliquer.

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 mets 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 simplement faire <a ng-click="$back()">Back</a>

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

131
Andrew Joslin

Idéalement, utilisez une simple directive pour garder les contrôleurs libres de la fenêtre $ redondante

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>
65
Darren

Une autre solution intéressante et réutilisable consiste à créer une directive telle que this :

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

puis utilisez-le simplement comme ceci:

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

Au cas où cela serait utile ... je frappais les "10 $ digest () itérations 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);
18
Rob Bygrave

Ou vous pouvez simplement utiliser le code javascript :

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>
3
Arvind Kushwaha

4 angulaire:

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

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

  constructor(private location: Location) { } 

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

Il y a eu une erreur de syntaxe. Essayez ceci et ça devrait marcher:

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

Pour moi, mon problème était que je devais revenir en arrière, puis passer à un autre état. Donc, utiliser $window.history.back() ne fonctionnait pas car, pour une raison quelconque, la transition était antérieure à history.back ();.

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

Cela a résolu mon problème.

0
deb2fast

Dans AngularJS2, j'ai trouvé un nouveau moyen, c'est peut-être exactement 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 à l’emplacement d’usgin de la page précédente d’angular2/router.

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

0
Paul Leclerc