Comment puis-je obtenir le bouton arrière pour travailler avec une machine D'état de routeur-ui AngularJS?

app.run(['$window', '$rootScope', 
function ($window ,  $rootScope) {
  $rootScope.goBack = function(){
    $window.history.back();
  }
}]);

<a href="#" ng-click="goBack()">Back</a>

après avoir testé différentes propositions, j'ai constaté que la manière la plus facile est souvent la meilleure.

si vous utilisez U-routeur angulaire et que vous avez besoin d'un bouton pour revenir en arrière est le suivant:

<button onclick="history.back()">Back</button>

ou

<a onclick="history.back()>Back</a>

// Avertissement ne réglez pas le href, ou le chemin d'accès sera brisé.

explication: Supposons une application de gestion standard. Objet de recherche - > objet de vue - > objet D'édition

utilisant les solutions angulaires De cet état:

Recherche - > View - > Edit

à:

Recherche - > Voir

Eh bien c'est ce que nous voulions sauf si maintenant vous cliquez sur le bouton Retour du navigateur vous serez là à nouveau:

Recherche - > View - > Edit

et ce n'est pas logique

Cependant, en utilisant la solution simple

<a onclick="history.back()"> Back </a>

de:

Recherche - > View - > Edit

après avoir cliqué sur le bouton:

Recherche - > Voir

après avoir cliqué sur le bouton Retour du navigateur:

recherche

la cohérence est respectée. :- )

si vous recherchez le plus simple bouton "back", alors vous pouvez configurer une directive comme ceci:

    .directive('back', function factory($window) {
      return {
        restrict   : 'E',
        replace    : true,
        transclude : true,
        templateUrl: 'wherever your template is located',
        link: function (scope, element, attrs) {
          scope.navBack = function() {
            $window.history.back();
          };
        }
      };
    });

gardez à l'esprit qu'il s'agit d'un bouton" Retour " assez inintelligent, car il utilise l'historique du navigateur. Si vous l'incluez sur votre page d'accueil, il enverra un utilisateur de retour à n'importe quelle url qu'ils sont venus avant d'atterrir sur la vôtre.

du navigateur en arrière/avant du bouton solution

J'ai rencontré le même problème et je l'ai résolu en utilisant le popstate event de l'objet $window et ui-router's $state object . Un événement popstate est envoyé à la fenêtre à chaque fois que l'entrée Active history change.

Les événements $stateChangeSuccess et $locationChangeSuccess ne sont pas déclenchés par le clic du bouton du navigateur même si la barre d'adresse indique le nouvel emplacement.

Donc, en supposant que vous avez navigué des États main à folder à main encore une fois, lorsque vous appuyez sur back sur le navigateur, vous devriez revenir à la route folder . Le chemin est à jour, mais la vue n'est pas et affiche toujours ce que vous avez sur main . essayez ceci:

angular
.module 'app', ['ui.router']
.run($state, $window) {

     $window.onpopstate = function(event) {

        var stateName = $state.current.name,
            pathname = $window.location.pathname.split('/')[1],
            routeParams = {};  // i.e.- $state.params

        console.log($state.current.name, pathname); // 'main', 'folder'

        if ($state.current.name.indexOf(pathname) === -1) {
            // Optionally set option.notify to false if you don't want 
            // to retrigger another $stateChangeStart event
            $state.go(
              $state.current.name, 
              routeParams,
              {reload:true, notify: false}
            );
        }
    };
}

marche arrière/avant devraient fonctionner en douceur après cela.

note: vérifiez la compatibilité du navigateur pour window.onpopstate() sûr

peut être résolu en utilisant une simple directive" go-back-history", celle-ci ferme également la fenêtre en cas d'absence d'histoire antérieure.

l'utilisation de la Directive

<a data-go-back-history>Previous State</a>

déclaration directive angulaire

.directive('goBackHistory', ['$window', function ($window) {
    return {
        restrict: 'A',
        link: function (scope, elm, attrs) {
            elm.on('click', function ($event) {
                $event.stopPropagation();
                if ($window.history.length) {
                    $window.history.back();
                } else {
                    $window.close();  
                }
            });
        }
    };
}])

Note: Utilisation du routeur ui ou non.

le bouton arrière ne fonctionnait pas pour moi aussi, mais j'ai compris que le problème était que j'avais html contenu dans ma page principale, dans l'élément ui-view .

c'est à dire

<div ui-view>
     <h1> Hey Kids! </h1>
     <!-- More content -->
</div>

donc j'ai déplacé le contenu dans un nouveau fichier .html , et je l'ai marqué comme un modèle dans le fichier .js avec les routes.

c'est à dire

   .state("parent.mystuff", {
        url: "/mystuff",
        controller: 'myStuffCtrl',
        templateUrl: "myStuff.html"
    })

history.back() et passer à état précédent donnent souvent effet pas que vous voulez. Par exemple, si vous avez le formulaire avec des onglets et chaque onglet a son propre état, cela vient de changer l'onglet précédent sélectionné, ne pas retourner du formulaire. Dans les États emboîtés, vous avez généralement besoin de penser à la Sorcière des États parents que vous voulez faire reculer.

la Présente directive résout le problème

angular.module('app', ['ui-router-back'])

<span ui-back='defaultState'> Go back </span>

Il revient à l'état, qui était actif Le bouton précédant le bouton s'est affiché. Optionnel defaultState est le nom de l'état qui a utilisé quand aucun état précédent dans la mémoire. Il restaure également la position de défilement

Code

class UiBackData {
    fromStateName: string;
    fromParams: any;
    fromStateScroll: number;
}

interface IRootScope1 extends ng.IScope {
    uiBackData: UiBackData;
}

class UiBackDirective implements ng.IDirective {
    uiBackDataSave: UiBackData;

    constructor(private $state: angular.ui.IStateService,
        private $rootScope: IRootScope1,
        private $timeout: ng.ITimeoutService) {
    }

    link: ng.IDirectiveLinkFn = (scope, element, attrs) => {
        this.uiBackDataSave = angular.copy(this.$rootScope.uiBackData);

        function parseStateRef(ref, current) {
            var preparsed = ref.match(/^\s*({[^}]*})\s*$/), parsed;
            if (preparsed) ref = current + '(' + preparsed[1] + ')';
            parsed = ref.replace(/\n/g, " ").match(/^([^(]+?)\s*(\((.*)\))?$/);
            if (!parsed || parsed.length !== 4)
                throw new Error("Invalid state ref '" + ref + "'");
            let paramExpr = parsed[3] || null;
            let copy = angular.copy(scope.$eval(paramExpr));
            return { state: parsed[1], paramExpr: copy };
        }

        element.on('click', (e) => {
            e.preventDefault();

            if (this.uiBackDataSave.fromStateName)
                this.$state.go(this.uiBackDataSave.fromStateName, this.uiBackDataSave.fromParams)
                    .then(state => {
                        // Override ui-router autoscroll 
                        this.$timeout(() => {
                            $(window).scrollTop(this.uiBackDataSave.fromStateScroll);
                        }, 500, false);
                    });
            else {
                var r = parseStateRef((<any>attrs).uiBack, this.$state.current);
                this.$state.go(r.state, r.paramExpr);
            }
        });
    };

    public static factory(): ng.IDirectiveFactory {
        const directive = ($state, $rootScope, $timeout) =>
            new UiBackDirective($state, $rootScope, $timeout);
        directive.$inject = ['$state', '$rootScope', '$timeout'];
        return directive;
    }
}

angular.module('ui-router-back')
    .directive('uiBack', UiBackDirective.factory())
    .run(['$rootScope',
        ($rootScope: IRootScope1) => {

            $rootScope.$on('$stateChangeSuccess',
                (event, toState, toParams, fromState, fromParams) => {
                    if ($rootScope.uiBackData == null)
                        $rootScope.uiBackData = new UiBackData();
                    $rootScope.uiBackData.fromStateName = fromState.name;
                    $rootScope.uiBackData.fromStateScroll = $(window).scrollTop();
                    $rootScope.uiBackData.fromParams = fromParams;
                });
        }]);