Angular - ui-router obtient l'état précédent

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 doc github ui-router.

ui-router ne suit pas l'état précédent une fois qu'il transite, mais l'événement $stateChangeSuccessest diffusé le $rootScopelorsque l'état change.

Vous devriez être en mesure d'attraper l'état précédent de cet événement ( fromest l'état que vous quittez):

$rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
   //assign the "from" parameter to something
});

J'utilise la résolution pour enregistrer les données d'état actuel avant de passer au nouvel état:

angular.module('MyModule')
.config(['$stateProvider', function ($stateProvider) {
    $stateProvider
        .state('mystate', {
            templateUrl: 'mytemplate.html',
            controller: ["PreviousState", function (PreviousState) {
                if (PreviousState.Name == "mystate") {
                    // ...
                }
            }],
            resolve: {
                PreviousState: ["$state", function ($state) {
                    var currentStateData = {
                        Name: $state.current.name,
                        Params: $state.params,
                        URL: $state.href($state.current.name, $state.params)
                    };
                    return currentStateData;
                }]
            }
        });
}]);

Par souci de lisibilité, je vais placer ma solution (basée sur la réponse de stu.salsbury) ici.

Ajoutez ce code au modèle abstrait de votre application pour qu'il s'exécute sur chaque page.

$rootScope.previousState;
$rootScope.currentState;
$rootScope.$on('$stateChangeSuccess', function(ev, to, toParams, from, fromParams) {
    $rootScope.previousState = from.name;
    $rootScope.currentState = to.name;
    console.log('Previous state:'+$rootScope.previousState)
    console.log('Current state:'+$rootScope.currentState)
});

Garde une trace des changements dans rootScope. C'est assez pratique.

Dans l'exemple suivant, j'ai créé un decorator(ne s'exécute qu'une seule fois par application lors de la phase de configuration) et ajoute une propriété supplémentaire au $stateservice, de sorte que cette approche n'ajoute pas de variables globales$rootscope et ne nécessite pas d'ajouter de dépendance supplémentaire à d'autres services que $state.

Dans mon exemple, j'avais besoin de rediriger un utilisateur vers la page d'index quand il était déjà connecté et quand il ne devait pas le rediriger vers la page "protégée" précédente après la connexion.

Les seuls services inconnus (pour vous) que j'utilise sont authenticationFactoryet appSettings:

• authenticationFactorygère simplement la connexion de l'utilisateur. Dans ce cas, j'utilise uniquement une méthode pour identifier si l'utilisateur est connecté ou non.
• appSettingssont des constantes juste pour ne pas utiliser de chaînes partout. appSettings.states.loginet appSettings.states.registercontient le nom de l'état pour l'URL de connexion et d'enregistrement.

Ensuite, dans n'importe quel controller/ serviceetc, vous devez injecter le $stateservice et vous pouvez accéder à l'url actuelle et précédente comme ceci:

• Actuel: $state.current.name
• Précédent: $state.previous.route.name

Depuis la console Chrome:

var injector = angular.element(document.body).injector();
var $state = injector.get("$state");
$state.current.name;
$state.previous.route.name;

La mise en oeuvre:

_{(J'utilise angular-ui-router v0.2.17et angularjs v1.4.9)}

(function(angular) {
    "use strict";

    function $stateDecorator($delegate, $injector, $rootScope, appSettings) {
        function decorated$State() {
            var $state = $delegate;
            $state.previous = undefined;
            $rootScope.$on("$stateChangeSuccess", function (ev, to, toParams, from, fromParams) {
                $state.previous = { route: from, routeParams: fromParams }
            });

            $rootScope.$on("$stateChangeStart", function (event, toState/*, toParams, fromState, fromParams*/) {
                var authenticationFactory = $injector.get("authenticationFactory");
                if ((toState.name === appSettings.states.login || toState.name === appSettings.states.register) && authenticationFactory.isUserLoggedIn()) {
                    event.preventDefault();
                    $state.go(appSettings.states.index);
                }
            });

            return $state;
        }

        return decorated$State();
    }

    $stateDecorator.$inject = ["$delegate", "$injector", "$rootScope", "appSettings"];

    angular
        .module("app.core")
        .decorator("$state", $stateDecorator);
})(angular);

Ajouter une nouvelle propriété appelée {previous} à $ state sur $ stateChangeStart

$rootScope.$on( '$stateChangeStart', ( event, to, toParams, from, fromParams ) => {
    // Add {fromParams} to {from}
    from.params = fromParams;

    // Assign {from} to {previous} in $state
    $state.previous = from;
    ...
}

Maintenant, partout où vous avez besoin, vous pouvez utiliser $ state, vous aurez le précédent disponible

previous:Object
    name:"route name"
    params:Object
        someParam:"someValue"
    resolve:Object
    template:"route template"
    url:"/route path/:someParam"

Et utilisez-le comme ceci:

$state.go( $state.previous.name, $state.previous.params );

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 qu'il soit plus testable, injectez le service $ window dans votre contrôleur et utilisez $ window.history.back ()).

J'utilise une approche similaire à ce que fait Endy Tjahjono.

Ce que je fais, c'est enregistrer la valeur de l'état actuel avant d'effectuer une transition. Voyons sur un exemple; imaginez ceci dans une fonction exécutée en cliquant 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: notez que 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 tout l'objet d'état.

Ensuite, indiquez «tout ce qui a été défini comme suit:

.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

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

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

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

Ok, je sais que je suis en retard à la fête ici, mais je suis nouveau à angular. J'essaie d'intégrer cela dans le guide de style John Papa ici. Je voulais le rendre réutilisable alors j'ai créé dans un bloc. Voici ce que j'ai trouvé:

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;
        });
    }
}
})();

core.module

(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 faites-moi savoir où je peux améliorer ce code.

Si vous avez juste besoin de cette fonctionnalité et que vous souhaitez l'utiliser dans plus d'un contrôleur, il s'agit d'un service simple pour 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 en tant que dépendance de votre contrôleur, puis dans votre contrôleur, vous pouvez faire:$scope.routeHistory = RouterTracker.getRouteHistory()

Je garde une trace des états précédents dans $ rootScope , donc chaque fois que j'en aurai besoin, j'appellerai simplement la ligne de code ci-dessous.

$state.go($rootScope.previousState);

Dans App.js :

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

Pour UI-Router (> = 1.0), les événements StateChange sont obsolètes. Pour un guide de migration complet, cliquez ici

Pour obtenir l'état précédent de l'état actuel dans UI-Router 1.0+:

app.run(function ($transitions) {
    $transitions.onSuccess({}, function (trans) {
         // previous state and paramaters
         var previousState = trans.from().name;
         var previousStateParameters = trans.params('from');
    });
});

Une solution très simple consiste simplement à modifier la chaîne $ state.current.name et à tout supprimer, y compris et après le dernier '.' - vous obtenez le nom de l'état parent. Cela ne fonctionne pas si vous sautez beaucoup entre les états, car il analyse simplement le chemin actuel. Mais si vos états correspondent à l'endroit où vous vous trouvez réellement, cela fonctionne.

var previousState = $state.current.name.substring(0, $state.current.name.lastIndexOf('.'))
$state.go(previousState)

Vous pouvez renvoyer l'état de cette façon:

$state.go($state.$current.parent.self.name, $state.params);

Un exemple:

(function() {
    'use strict'

    angular.module('app')
        .run(Run);

    /* @ngInject */
    function Run($rootScope, $state) {

        $rootScope.back = function() {
            $state.go($state.$current.parent.self.name, $state.params);
        };

    };

})();