Angular - пользовательский интерфейс получает прежнее состояние

Есть ли способ получить предыдущее состояние текущего состояния?

Например, я хотел бы знать, каким было предыдущее состояние перед текущим состоянием B (где предыдущее состояние было бы состоянием A).

Я не могу найти его на страницах документации github ui-router.

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: $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содержат название государства для логина и регистрации URL.

Затем в любой controller/ serviceetc вам нужно внедрить $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>

ИЛИ

//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 } }

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

Затем укажите «что бы» ни было определено так:

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

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

params : {
  previousState: null,
}

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

$state.params.previousState.name

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

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

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

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

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

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

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

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

где «core» в .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);
        };

    };

})();