Angular - ui-router obtém estado anterior

Existe uma maneira de obter o estado anterior do estado atual?

Por exemplo, eu gostaria de saber qual era o estado anterior antes do estado atual B (onde o estado anterior teria sido o estado A).

Não consigo encontrá-lo nas páginas de documentos do ui-router github.

O ui-router não rastreia o estado anterior depois da transição, mas o evento $stateChangeSuccessé transmitido no$rootScope quando o estado muda.

Você deve conseguir capturar o estado anterior desse evento ( fromé o estado que você está saindo):

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

Uso resolv para salvar os dados do estado atual antes de passar para o novo estado:

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

Para facilitar a leitura, colocarei minha solução (baseada na resposta de stu.salsbury) aqui.

Adicione esse código ao modelo abstrato do seu aplicativo para que ele seja executado em todas as páginas.

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

Mantém o controle das alterações no rootScope. É muito útil.

No exemplo a seguir, criei um decorator (é executado apenas uma vez por aplicativo na fase de configuração) e adiciona uma propriedade extra ao $stateserviço, portanto, essa abordagem não adiciona variáveis globais$rootscope e não exige a adição de nenhuma dependência extra a outros serviços $state.

No meu exemplo, eu precisava redirecionar um usuário para a página de índice quando ele já estava conectado e quando ele não deveria redirecioná-lo para a página "protegida" anterior após o login.

Os únicos serviços desconhecidos (para você) que eu uso são authenticationFactory e appSettings:

• authenticationFactoryapenas administra o login do usuário. Nesse caso, utilizo apenas um método para identificar se o usuário está logado ou não.
• appSettings são constantes apenas para não usar seqüências de caracteres em todos os lugares. appSettings.states.logine appSettings.states.registercontenha o nome do estado para o URL de login e registro.

Então, em qualquer controller/ serviceetc, você precisa injetar$state serviço e pode acessar os URLs atual e anterior como este:

• Atual: $state.current.name
• Anterior: $state.previous.route.name

No console do Chrome:

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

Implementação:

_{(Eu estou 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);

Adicione uma nova propriedade chamada {previous} a $ state em $ 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;
    ...
}

Agora, em qualquer lugar que você precisar, pode usar $ state, você terá disponível anteriormente

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

E use-o assim:

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

Estou com o mesmo problema e encontro a maneira mais fácil de fazer isso ...

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

(Se você quiser que seja mais testável, injete o serviço $ window no seu controlador e use $ window.history.back ()).

Eu uso uma abordagem semelhante ao que Endy Tjahjono faz.

O que faço é salvar o valor do estado atual antes de fazer uma transição. Vamos ver em um exemplo; imagine isso dentro de uma função executada ao clicar no que quer que desencadeie a transição:

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

A chave aqui é o objeto params (um mapa dos parâmetros que serão enviados ao estado) -> { previousState : { name : $state.current.name } }

Nota: observe que estou apenas "salvando" o atributo name do objeto $ state, porque é a única coisa que preciso para salvar o estado. Mas poderíamos ter todo o objeto de estado.

Em seguida, indique "o que quer que" tenha sido definido assim:

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

Aqui, o ponto principal é o objeto params.

params : {
  previousState: null,
}

Então, dentro desse estado, podemos obter o estado anterior assim:

$state.params.previousState.name

Aqui está uma solução realmente elegante de Chris Thielen ui-router-extras: $ previousState

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

previousé um objeto que se parece com: { state: fromState, params: fromParams }where fromState é o estado anterior e fromParams são os parâmetros de estado anteriores.

Ok, eu sei que estou atrasado para a festa aqui, mas sou novo em angular. Estou tentando fazer isso se encaixar no guia de estilo de John Papa aqui. Eu queria tornar isso reutilizável, então criei em um bloco. Aqui está o que eu vim com:

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

Qualquer crítica a este código só me ajudará; portanto, deixe-me saber onde posso melhorar esse código.

Se você só precisa dessa funcionalidade e deseja usá-la em mais de um controlador, este é um serviço simples para rastrear o histórico de rotas:

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

onde o 'core' no .module ('core') seria o nome do seu aplicativo / módulo. Exija o serviço como uma dependência do seu controlador e, em seu controlador, você poderá:$scope.routeHistory = RouterTracker.getRouteHistory()

Eu acompanho os estados anteriores em $ rootScope , portanto, sempre que precisar, chamarei a linha de código abaixo.

$state.go($rootScope.previousState);

No App.js :

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

Para o roteador de interface do usuário (> = 1.0), os eventos StateChange foram preteridos. Para um guia completo de migração, clique em aqui

Para obter o estado anterior do estado atual no 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');
    });
});

Uma solução realmente simples é apenas editar a string $ state.current.name e cortar tudo, incluindo e após o último '.' - você obtém o nome do estado pai. Isso não funciona se você pular muito entre os estados, porque apenas analisa o caminho atual. Mas se seus estados correspondem a onde você realmente está, então isso funciona.

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

Você pode retornar o estado desta maneira:

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

Um exemplo:

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

    };

})();