각도 - UI 라우터가 이전 상태를 가져옵니다.

각도 - UI 라우터가 이전 상태를 가져옵니다.

현재 상태를 알 수 있는 방법이 있나요?

예를 들어 현재 상태 B 이전의 상태를 알고 싶습니다(이전 상태는 상태 A였을 것입니다).

ui-router github doc 페이지에서 찾을 수 없습니다.

새 상태로 이동하기 전에 현재 상태 데이터를 저장하려면 resolve를 저장합니다.

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

ui-timeout은 상태를 추적하지 않습니다.$stateChangeSuccess되고 있습니다.$rootScope상태가 변화했을 때.

이벤트로부터 할 수 입니다.from나는는 : : : 。

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

가독성을 위해 솔루션(stu.salsbury의 anwser에 근거)을 여기에 둡니다.

모든 페이지에서 실행되도록 앱의 추상 템플릿에 이 코드를 추가하십시오.

$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의 변경을 추적합니다.꽤 편리하네요.

에서는 'I'를 만들었습니다.decorator만) 및 을 (설정 단계에서 추가)에 추가합니다.$state이 접근방식은 글로벌 변수를 추가하지 않습니다.$rootscope 다른 .$state.

이 예에서는 사용자가 이미 로그인하고 로그인 후 이전 "보호" 페이지로 리디렉션하지 않을 때 사용자를 인덱스 페이지로 리디렉션해야 했습니다.

사용하고 있는 불명확한 서비스는 다음과 같습니다.authenticationFactory ★★★★★★★★★★★★★★★★★」appSettings:

• authenticationFactory는 사용자 로그인을 관리합니다.이 경우 사용자가 로그인하고 있는지 확인하는 방법만 사용합니다.
• appSettings모든 곳에 문자열을 사용하지 않기 위한 상수입니다. appSettings.states.login ★★★★★★★★★★★★★★★★★」appSettings.states.registerURL 입니다.

후, 임의의 ★★★★★★★★★★★★★★★★★★★★★.controller/service해야 .$state다음과 같이 현재 및 이전 URL에 액세스할 수 있습니다.

• 재::$state.current.name
• 버전 : 전전전 previous :$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);

$state의 $state에 {previous}라는 새 속성 추가Change Start(변경 시작)

$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" ("Params")-> 입니다.{ previousState : { name : $state.current.name } }

주의: 상태를 저장하기 위해 필요한 것은 $state 객체의 이름 속성뿐입니다.하지만 국가 전체를 대상으로 삼을 수도 있어

다음으로 스테이트 "whatter"는 다음과 같이 정의됩니다.

.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의 매우 우아한 솔루션입니다.$ previous State

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

previous입니다.{ state: fromState, params: fromParams }「State」로부터 「Params」로부터 「Params」로부터 「Params」로부터 「Params」로부터 「Params」로부터」를 참조해 주세요.

좋아, 내가 여기 파티에 늦은 건 알지만, 난 처음이야.저는 이것을 존 파파 스타일 가이드에 넣으려고 합니다.이걸 재사용할 수 있게 하고 싶어서블럭으로 만들었어요제가 생각해낸 것은 다음과 같습니다.

이전 상태 제공자

(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.discloss.conflossible 。

(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는 앱의 이름입니다core core'의 'core'는 '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;
});

정말 간단한 해결책은 $state.current.name 문자열을 편집하고 마지막 ''를 포함한 모든 것을 잘라내는 것입니다.부모 상태의 이름을 알 수 있습니다.이것은 현재 경로를 역분석할 뿐이기 때문에 주 사이를 많이 이동하면 작동하지 않습니다.하지만 당신의 상태가 당신이 실제로 어디에 있는지와 일치한다면, 이것은 효과가 있습니다.

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

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

    };

})();

언급URL : https://stackoverflow.com/questions/16635381/angular-ui-router-get-previous-state