Angular — пользовательский интерфейс получает предыдущее состояние

ui-router не отслеживает предыдущее состояние после перехода, но событие $stateChangeSuccess передается на $rootScope при изменении состояния.

Вы должны иметь возможность поймать предыдущее состояние из этого события (from — это состояние, которое вы покидаете):

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

Я использую разрешение, чтобы сохранить данные текущего состояния перед переходом в новое состояние:

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: angular.copy($state.params),
                        URL: $state.href($state.current.name, $state.params)
                    };
                    return currentStateData;
                }]
            }
        });
}]);

Для удобочитаемости я размещу здесь свое решение (на основе ответа stu.salsbury).

Добавьте этот код в абстрактный шаблон вашего приложения, чтобы он выполнялся на каждой странице.

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

Отслеживает изменения в rootScope. Это очень удобно.

В следующем примере я создал decorator (запускается только один раз для каждого приложения на этапе настройки) и добавил дополнительное свойство в службу $state, поэтому этот подход не добавляет глобальные переменные в $rootscope и не требует добавления любая дополнительная зависимость от других служб, кроме $state.

В моем примере мне нужно было перенаправить пользователя на индексную страницу, когда он уже вошел в систему, и когда он не должен был перенаправить его на предыдущую «защищенную» страницу после входа в систему.

Единственные неизвестные сервисы (для вас), которыми я пользуюсь, это authenticationFactory и appSettings:

• authenticationFactory просто управляет логином пользователя. В этом случае я использую только метод, чтобы определить, вошел ли пользователь в систему или нет.
• appSettings являются константами только для того, чтобы не использовать строки везде. appSettings.states.login и appSettings.states.register содержат название состояния для входа и регистрации.

Затем в любом controller/service и т. д. вам нужно внедрить службу $state, и вы можете получить доступ к текущему и предыдущему URL-адресу следующим образом:

• Текущий: $state.current.name
• Предыдущий: $state.previous.route.name

Из консоли Chrome:

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

Реализация:

_{(я использую angular-ui-router v0.2.17 и 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);

Добавьте новое свойство под названием {previous} в $state на $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;
    ...
}

Теперь в любом месте, где вам нужно, вы можете использовать $state, у вас будет предыдущий доступный

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

И используйте его так:

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

Я застрял с той же проблемой и найти самый простой способ сделать это...

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

OR

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

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

(Если вы хотите, чтобы это было более тестируемым, внедрите службу $window в свой контроллер и используйте $window.history.back()).

Я использую тот же подход, что и Энди Тьяджоно.

Что я делаю, так это сохраняю значение текущего состояния перед выполнением перехода. Давайте посмотрим на примере; представьте это внутри функции, выполняемой при нажатии на то, что запускает переход:

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

Ключевым здесь является объект params (карта параметров, которые будут отправлены в состояние) -> { previousState : { name : $state.current.name } }

Примечание: обратите внимание, что я «сохраняю» только атрибут имени объекта $state, потому что это единственное, что мне нужно для сохранения состояния. Но мы могли бы иметь весь объект состояния.

Затем укажите «все», что было определено следующим образом:

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

Здесь ключевым моментом является объект params.

params : {
  previousState: null,
}

Затем внутри этого состояния мы можем получить предыдущее состояние следующим образом:

$state.params.previousState.name

Вот действительно элегантное решение от Криса Тилена ui-router-extras: $previousState

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

previous — это объект, который выглядит так: { state: fromState, params: fromParams } где fromState — предыдущее состояние, а fromParams — параметры предыдущего состояния.

Хорошо, я знаю, что опаздываю на вечеринку, но я новичок в angular. Я пытаюсь привести это в соответствие с руководством по стилю John Papa здесь. Я хотел сделать это многоразовым, поэтому создал блок. Вот что я придумал:

предыдущийStateProvider

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

ядро.модуль

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

Любая критика этого кода только поможет мне, поэтому, пожалуйста, дайте мне знать, где я могу улучшить этот код.

Если вам просто нужна эта функциональность и вы хотите использовать ее более чем в одном контроллере, это простой сервис для отслеживания истории маршрутов:

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

где "ядро" в .module('core') будет именем вашего приложения/модуля. Требуйте службу как зависимость от вашего контроллера, тогда в вашем контроллере вы можете сделать: $scope.routeHistory = RouterTracker.getRouteHistory()

Я отслеживаю предыдущие состояния в $rootScope, поэтому всякий раз, когда это необходимо, я просто вызываю приведенную ниже строку кода.

$state.go($rootScope.previousState);

В App.js:

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

Для UI-Router(>=1.0) события StateChange устарели. Чтобы получить полное руководство по миграции, нажмите здесь

Чтобы получить предыдущее состояние текущего состояния в 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');
    });
});

Действительно простое решение — просто отредактировать строку $state.current.name и вырезать все, включая и после последнего символа «.». - вы получаете имя родительского государства. Это не работает, если вы много прыгаете между состояниями, потому что он просто анализирует текущий путь. Но если ваши состояния соответствуют тому, где вы на самом деле находитесь, то это работает.

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

Вы можете вернуть состояние следующим образом:

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

Пример:

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

    };

})();