Angular - ui-router récupérer l'état précédent

Question

Existe-t-il un moyen d'obtenir l'état précédent de l'état actuel ?

Par exemple, je voudrais savoir quel était l'état précédent avant l'état actuel B (où l'état précédent aurait été l'état A).

Je ne suis pas en mesure de le trouver dans les pages de doc ui-router github.

Answer 1

Je suis coincé avec le même problème et je trouve le moyen le plus simple de le faire...

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

OU

//Html
<button type="button" ng-click="goBack()">Back</button>

//JS
$scope.goBack = function() {
  window.history.back();
};

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

Answer 2

J'utilise une approche similaire à celle d'Endy Tjahjono.

Ce que je fais, c'est de sauvegarder la valeur de l'état actuel avant d'effectuer une transition. Voyons un exemple ; imaginez ceci à l'intérieur d'une fonction exécutée lorsque vous cliquez sur ce qui déclenche la transition :

$state.go( 'state-whatever', { previousState : { name : $state.current.name } }, {} );

La clé ici est l'objet params (une carte des paramètres qui seront envoyés à l'état) -> { previousState : { name : $state.current.name } }

Remarque : je ne "sauvegarde" que l'attribut name de l'objet $state, car c'est la seule chose dont j'ai besoin pour sauvegarder l'état. Mais nous pourrions avoir l'objet state entier.

Ensuite, l'état "peu importe" a été défini comme ceci :

.state( 'user-edit', {
  url : 'whatever'
  templateUrl : 'whatever',
  controller: 'whateverController as whateverController',
  params : {
    previousState: null,
  }
});

Ici, le point clé est l'objet params.

params : {
  previousState: null,
}

Ensuite, à l'intérieur de cet état, nous pouvons obtenir l'état précédent comme ceci :

$state.params.previousState.name

Answer 3

Voici une solution vraiment élégante de Chris Thielen ui-router-extras : $previousState

var previous = $previousState.get(); //Gets a reference to the previous state.

previous est un objet qui ressemble à : { state: fromState, params: fromParams } où fromState est l'état précédent et fromParams est les paramètres de l'état précédent.

Answer 4

Ok, je sais que je suis en retard pour la fête ici, mais je suis nouveau à angular. J'essaie de faire en sorte que cela s'intègre dans le Guide de style John Papa ici. Je voulais que ce soit réutilisable, alors j'ai créé un bloc. Voici ce que j'ai créé :

previousStateProvider

(function () {
'use strict';

angular.module('blocks.previousState')
       .provider('previousState', previousStateProvider);

previousStateProvider.$inject = ['$rootScopeProvider'];

function previousStateProvider($rootScopeProvider) {
    this.$get = PreviousState;

    PreviousState.$inject = ['$rootScope'];

    /* @ngInject */
    function PreviousState($rootScope) {
        $rootScope.previousParms;
        $rootScope.previousState;
        $rootScope.currentState;

        $rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
            $rootScope.previousParms = fromParams;
            $rootScope.previousState = from.name;
            $rootScope.currentState = to.name;
        });
    }
}
})();

module de base

(function () {
'use strict';

angular.module('myApp.Core', [
    // Angular modules 
    'ngMessages',
    'ngResource',

    // Custom modules 
    'blocks.previousState',
    'blocks.router'

    // 3rd Party Modules
]);
})();

core.config

(function () {
'use strict';

var core = angular.module('myApp.Core');

core.run(appRun);

function appRun(previousState) {
    // do nothing. just instantiating the state handler
}
})();

Toute critique sur ce code ne fera que m'aider, alors s'il vous plaît dites-moi où je peux améliorer ce code.

Answer 5

Si vous n'avez besoin que de cette fonctionnalité et que vous souhaitez l'utiliser dans plusieurs contrôleurs, il s'agit d'un service simple permettant de suivre l'historique des itinéraires :

  (function () {
  'use strict';

  angular
    .module('core')
    .factory('RouterTracker', RouterTracker);

  function RouterTracker($rootScope) {

    var routeHistory = [];
    var service = {
      getRouteHistory: getRouteHistory
    };

    $rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
      routeHistory.push({route: from, routeParams: fromParams});
    });

    function getRouteHistory() {
      return routeHistory;
    }

    return service;
  }
})();

où le "core" dans .module('core') serait le nom de votre application/module. Exigez le service comme une dépendance de votre contrôleur, alors dans votre contrôleur vous pouvez faire : $scope.routeHistory = RouterTracker.getRouteHistory()