Angolare - ui-router ottiene lo stato precedente

C'è un modo per ottenere lo stato precedente dello stato corrente?

Ad esempio, vorrei sapere quale era lo stato precedente prima dello stato corrente B (dove lo stato precedente sarebbe stato lo stato A).

Non riesco a trovarlo nelle pagine del documento github di ui-router.

ui-router non tiene traccia dello stato precedente dopo la transizione, ma l'evento $stateChangeSuccessviene trasmesso $rootScopequando lo stato cambia.

Dovresti essere in grado di rilevare lo stato precedente di quell'evento ( fromè lo stato che stai lasciando):

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

Uso la risoluzione per salvare i dati dello stato corrente prima di passare al nuovo stato:

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

Per motivi di leggibilità, inserirò qui la mia soluzione (basata sulla risposta di stu.salsbury).

Aggiungi questo codice al modello astratto dell'app in modo che venga eseguito su ogni pagina.

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

Tiene traccia delle modifiche in rootScope. È abbastanza utile.

Nell'esempio seguente ho creato un decorator(viene eseguito una sola volta per app in fase di configurazione) e aggiunge una proprietà extra al $stateservizio, quindi questo approccio non aggiunge variabili globali$rootscope e non richiede alcuna dipendenza aggiuntiva da altri servizi oltre a$state .

Nel mio esempio avevo bisogno di reindirizzare un utente alla pagina dell'indice quando era già connesso e quando non doveva reindirizzare alla precedente pagina "protetta" dopo l'accesso.

Gli unici servizi sconosciuti (per te) che utilizzo sono authenticationFactorye appSettings:

• authenticationFactorygestisce solo l'accesso dell'utente. In questo caso uso solo un metodo per identificare se l'utente ha effettuato l'accesso o meno.
• appSettingssono costanti solo per non usare stringhe ovunque. appSettings.states.logine appSettings.states.registercontiene il nome dello stato per l'URL di accesso e di registrazione.

Quindi in qualsiasi controller/ serviceetc devi iniettare il $stateservizio e puoi accedere all'URL attuale e precedente in questo modo:

• Attuale: $state.current.name
• Precedente: $state.previous.route.name

Dalla console di Chrome:

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

Implementazione:

_{(Sto usando angular-ui-router v0.2.17e 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);

Aggiungi una nuova proprietà chiamata {precedente} a $ state su $ 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;
    ...
}

Ora, ovunque tu abbia bisogno, puoi usare $ state avrai a disposizione in precedenza

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

E usalo così:

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

Sono bloccato con lo stesso problema e trovo il modo più semplice per farlo ...

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

O

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

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

(Se vuoi che sia più testabile, inietta il servizio $ window nel tuo controller e usa $ window.history.back ()).

Uso un approccio simile a quello che fa Endy Tjahjono.

Quello che faccio è salvare il valore dello stato corrente prima di effettuare una transizione. Vediamo un esempio; immagina questo all'interno di una funzione eseguita quando fai clic su qualunque cosa inneschi la transizione:

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

La chiave qui è l'oggetto params (una mappa dei parametri che verranno inviati allo stato) -> { previousState : { name : $state.current.name } }

Nota: nota che sto solo "salvando" l'attributo name dell'oggetto $ state, perché è l'unica cosa di cui ho bisogno per salvare lo stato. Ma potremmo avere l'intero oggetto stato.

Quindi, indica "qualunque cosa" sia stata definita in questo modo:

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

Qui, il punto chiave è l'oggetto params.

params : {
  previousState: null,
}

Quindi, all'interno di quello stato, possiamo ottenere lo stato precedente in questo modo:

$state.params.previousState.name

Ecco una soluzione davvero elegante di Chris Thielen ui-router-extra: $ previousState

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

previousè un oggetto simile: { state: fromState, params: fromParams }dove fromState è lo stato precedente e fromParams sono i parametri di stato precedenti.

Ok, so che sono in ritardo alla festa qui, ma sono nuovo di angolare. Sto cercando di adattarlo alla guida di stile di John Papa qui. Volevo renderlo riutilizzabile, quindi l'ho creato in un blocco. Ecco cosa mi è venuto in mente:

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

Qualsiasi critica su questo codice mi aiuterà solo, quindi per favore fatemi sapere dove posso migliorare questo codice.

Se hai solo bisogno di questa funzionalità e vuoi usarla in più di un controller, questo è un semplice servizio per tenere traccia della cronologia dei percorsi:

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

dove "core" in .module ("core") sarebbe il nome della tua app / modulo. Richiedi il servizio come dipendenza dal tuo controller, quindi nel tuo controller puoi fare:$scope.routeHistory = RouterTracker.getRouteHistory()

Tengo traccia degli stati precedenti in $ rootScope , quindi ogni volta che ho bisogno chiamerò semplicemente la riga di codice qui sotto.

$state.go($rootScope.previousState);

In App.js :

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

Per UI-Router (> = 1.0), gli eventi StateChange sono stati deprecati. Per una guida completa alla migrazione, fai clic qui

Per ottenere lo stato precedente dello stato corrente in 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');
    });
});

Una soluzione davvero semplice è solo quella di modificare la stringa $ state.current.name e ritagliare tutto, incluso e dopo l'ultimo '.' - ottieni il nome dello stato principale. Questo non funziona se salti molto tra gli stati perché analizza semplicemente il percorso corrente. Ma se i tuoi stati corrispondono a dove sei realmente, allora funziona.

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

È possibile restituire lo stato in questo modo:

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

Un esempio:

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

    };

})();