blocks|key|314164|text|ui-+$stateChangeSuccess一旦转换就不会跟踪前一个状态，但是当状态改变时，事件路由器就会在$rootScope上广播。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|314165|您应该能够从该事件捕获前一个状态(from是您要离开的状态)：|314166|$rootScope.$on('$stateChangeSuccess',+function+(ev,+to,+toParams,+from,+fromParams)+{
+++//assign+the+"from"+parameter+to+something
});|code-block|syntax|javascript|314167|entityMap^0|4|J|1J|A|0|H|4|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

ui-router doesn't track the previous state once it transitions, but the event <code>$stateChangeSuccess</code> is broadcast on the <code>$rootScope</code> when the state changes.

You should be able to catch the prior state from that event (<code>from</code> is the state you're leaving):

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

blocks|key|97333|text|考虑到可读性，我将把我的解决方案(基于stu.salsbury的anwser)放在这里。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|97334|将此代码添加到应用程序的抽象模板中，这样它就可以在每个页面上运行。|97335|$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:'%2B$rootScope.previousState)
++++console.log('Current+state:'%2B$rootScope.currentState)
});|code-block|syntax|javascript|97336|跟踪rootScope中的更改。这很方便。|97337|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

For sake of readability, I'll place my solution (based of stu.salsbury's anwser) here.

Add this code to your app's abstract template so it runs on every page.

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

Keeps track of the changes in rootScope. Its pretty handy.

blocks|key|97339|text|在移动到新状态之前，我使用resolve保存当前状态数据：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|97340|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;
++++++++++++++++}]
++++++++++++}
++++++++});
}]);|code-block|syntax|javascript|97341|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I use resolve to save the current state data before moving to the new state:
<pre><code>angular.module('MyModule')
.config(['$stateProvider', function ($stateProvider) {
 $stateProvider
 .state('mystate', {
 templateUrl: 'mytemplate.html',
 controller: [&quot;PreviousState&quot;, function (PreviousState) {
 if (PreviousState.Name == &quot;mystate&quot;) {
 // ...
 }
 }],
 resolve: {
 PreviousState: [&quot;$state&quot;, function ($state) {
 var currentStateData = {
 Name: $state.current.name,
 Params: angular.copy($state.params),
 URL: $state.href($state.current.name, $state.params)
 };
 return currentStateData;
 }]
 }
 });
}]);
</code></pre>

blocks|key|314250|text|我使用与Endy+Tjahjono类似的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|314251|我所做的是在进行转换之前保存当前状态的值。让我们看一个例子；想象一下，当裁剪到触发转换的任何东西时，在一个函数中执行以下内容：|314252|$state.go(+'state-whatever',+{+previousState+:+{+name+:+$state.current.name+}+},+{}+);|code-block|syntax|javascript|314253|这里的关键是参数对象(将被发送到状态的参数的映射)+->+{+previousState+:+{+name+:+$state.current.name+}+}|offset|length|style|CODE|314254|注意:注意，我只“保存”了$state对象的name属性，因为这是我保存状态所需要的唯一东西。但我们可以拥有整个状态对象。|314255|然后，声明“this”的定义是这样的：|314256|.state(+'user-edit',+{
++url+:+'whatever'
++templateUrl+:+'whatever',
++controller:+'whateverController+as+whateverController',
++params+:+{
++++previousState:+null,
++}
});|314257|这里，关键点是params对象。|314258|params+:+{
++previousState:+null,
}|314259|然后，在该状态中，我们可以像这样获得前一个状态：|314260|$state.params.previousState.name|314261|entityMap^0|0|0|0|T|1E|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|17|8|@$K|18|L|19|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1C|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|1D|8|@]|9|@]|A|$]]|$1|W|3|X|5|F|7|1E|8|@]|9|@]|A|$G|H]]|$1|Y|3|Z|5|6|7|1F|8|@]|9|@]|A|$]]|$1|10|3|11|5|F|7|1G|8|@]|9|@]|A|$G|H]]|$1|12|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|13|$]]

I use a similar approach to what Endy Tjahjono does.

What I do is to save the value of the current state before making a transition.
Lets see on an example; imagine this inside a function executed when cliking to whatever triggers the transition:

<pre><code>$state.go( 'state-whatever', { previousState : { name : $state.current.name } }, {} );
</code></pre>

The key here is the params object (a map of the parameters that will be sent to the state) -> <code>{ previousState : { name : $state.current.name } }</code>

Note: note that Im only "saving" the name attribute of the $state object, because is the only thing I need for save the state. But we could have the whole state object.

Then, state "whatever" got defined like this:

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

Here, the key point is the params object.

<pre><code>params : {
 previousState: null,
}
</code></pre>

Then, inside that state, we can get the previous state like this:

<pre><code>$state.params.previousState.name
</code></pre>

blocks|key|97431|text|这是来自Chris+Thielen+ui-router-extras:++$previousState的一个非常优雅的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|97432|var+previous+=+$previousState.get();+//Gets+a+reference+to+the+previous+state.|code-block|syntax|javascript|97433|previous是一个类似于：{+state:+fromState,+params:+fromParams+}的对象，其中fromState是前一个状态，fromParams是前一个状态参数。|style|CODE|97434|entityMap|0|LINK|mutability|MUTABLE|url|http://christopherthielen.github.io/ui-router-extras/#/previous^0|I|X|0|0|0|0|8|F|14|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@$A|10|B|11|K|L]|$A|12|B|13|K|L]]|9|@]|C|$]]|$1|M|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

Here is a really elegant solution from Chris Thielen <a href="http://christopherthielen.github.io/ui-router-extras/#/previous">ui-router-extras: $previousState</a>

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

<code>previous</code> is an object that looks like: <code>{ state: fromState, params: fromParams }</code> where fromState is the previous state and fromParams is
 the previous state parameters.

blocks|key|314376|text|如果您只需要此功能并希望在多个控制器中使用它，这是一个跟踪路由历史的简单服务：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|314377|++(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;
++}
})();|code-block|syntax|javascript|314378|其中.module中的“核心”(“核心”)将是您的应用程序/模块的名称。需要将服务作为控制器的依赖项，然后在控制器中可以执行以下操作：$scope.routeHistory+=+RouterTracker.getRouteHistory()|offset|length|style|CODE|314379|entityMap^0|0|0|1V|1H|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

If you just need this functionality and want to use it in more than one controller, this is a simple service to track route history:

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

where the 'core' in .module('core') would be the name of your app/module. Require the service as a dependency to your controller, then in your controller you can do: <code>$scope.routeHistory = RouterTracker.getRouteHistory()</code>

blocks|key|314411|text|您可以通过以下方式返回状态：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|314412|$state.go($state.$current.parent.self.name,+$state.params);|code-block|syntax|javascript|314413|举个例子：|314414|(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);
++++++++};

++++};

})();|314415|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You can return the state this way:

<pre><code>$state.go($state.$current.parent.self.name, $state.params);
</code></pre>

An example:

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

 };

})();
</code></pre>

blocks|key|314475|text|一个非常简单的解决方案就是编辑$state.current.name字符串，去掉所有内容，包括最后一个'.‘之后的所有内容--你得到了父状态的名称。如果你在状态之间跳转很多，这是不起作用的，因为它只是解析回当前的路径。但是，如果你的状态与你实际所处的位置相对应，那么这是可行的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|314476|var+previousState+=+$state.current.name.substring(0,+$state.current.name.lastIndexOf('.'))
$state.go(previousState)|code-block|syntax|javascript|314477|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

A really simple solution is just to edit the $state.current.name string and cut out everything including and after the last '.' - you get the name of the parent state. This doesn't work if you jump a lot between states because it just parses back the current path. But if your states correspond to where you actually are, then this works.

<pre><code>var previousState = $state.current.name.substring(0, $state.current.name.lastIndexOf('.'))
$state.go(previousState)
</code></pre>

blocks|key|314537|text|将名为{previous}的新属性添加到$stateChangeStart上的$state|type|unstyled|depth|inlineStyleRanges|entityRanges|data|314538|$rootScope.$on(+'$stateChangeStart',+(+event,+to,+toParams,+from,+fromParams+)+=>+{
++++//+Add+{fromParams}+to+{from}
++++from.params+=+fromParams;

++++//+Assign+{from}+to+{previous}+in+$state
++++$state.previous+=+from;
++++...
}|code-block|syntax|javascript|314539|现在，您需要的任何地方都可以使用以前可用的$state|314540|previous:Object
++++name:"route+name"
++++params:Object
++++++++someParam:"someValue"
++++resolve:Object
++++template:"route+template"
++++url:"/route+path/:someParam"|314541|像这样使用它：|314542|$state.go(+$state.previous.name,+$state.previous.params+);|314543|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Add a new property called {previous} to $state on $stateChangeStart

<pre><code>$rootScope.$on( '$stateChangeStart', ( event, to, toParams, from, fromParams ) =&gt; {
 // Add {fromParams} to {from}
 from.params = fromParams;

 // Assign {from} to {previous} in $state
 $state.previous = from;
 ...
}
</code></pre>

Now anywhere you need can use $state you will have previous available 

<pre><code>previous:Object
 name:"route name"
 params:Object
 someParam:"someValue"
 resolve:Object
 template:"route template"
 url:"/route path/:someParam"
</code></pre>

And use it like so:

<pre><code>$state.go( $state.previous.name, $state.previous.params );
</code></pre>

blocks|key|97653|text|我被同样的问题困扰着，并找到了最简单的方法来做到这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|97654|//Html
<button+type="button"+onclick="history.back()">Back</button>|code-block|syntax|javascript|97655|或|97656|//Html
<button+type="button"+ng-click="goBack()">Back</button>

//JS
$scope.goBack+=+function()+{
++window.history.back();
};|97657|(如果您希望它更具可测试性，请将$window服务注入控制器并使用$window.history.back())。|97658|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I am stuck with same issue and find the easiest way to do this...

<pre><code>//Html
&lt;button type="button" onclick="history.back()"&gt;Back&lt;/button&gt;
</code></pre>

OR

<pre><code>//Html
&lt;button type="button" ng-click="goBack()"&gt;Back&lt;/button&gt;

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

(If you want it to be more testable, inject the $window service into your controller and use $window.history.back()).

blocks|key|97730|text|对于UI转发器(>=1.0)，StateChange事件已弃用。有关完整的迁移指南，请单击here|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|97731|要在UI转发器1.0%2B中获取当前状态的先前状态，请执行以下操作：|97732|app.run(function+($transitions)+{
++++$transitions.onSuccess({},+function+(trans)+{
+++++++++//+previous+state+and+paramaters
+++++++++var+previousState+=+trans.from().name;
+++++++++var+previousStateParameters+=+trans.params('from');
++++});
});|code-block|syntax|javascript|97733|entityMap|0|LINK|mutability|MUTABLE|url|https://ui-router.github.io/guide/ng1/migrate-to-1_0^0|19|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

For UI-Router(>=1.0), StateChange events have been deprecated. 
For complete migration guide, click <a href="https://ui-router.github.io/guide/ng1/migrate-to-1_0" rel="nofollow noreferrer">here</a>

To get the previous state of the current state in UI-Router 1.0+: 

<pre><code>app.run(function ($transitions) {
 $transitions.onSuccess({}, function (trans) {
 // previous state and paramaters
 var previousState = trans.from().name;
 var previousStateParameters = trans.params('from');
 });
});
</code></pre>

Is there a way to get the previous state of the current state? 

For example I would like to know what the previous state was before current state B (where previous state would have been state A). 

I am not able to find it in ui-router github doc pages.

Angular - ui-router get previous state

路由器

路由

有没有办法获得当前状态的前一个状态？例如，我想知道当前状态B之前的前一个状态是什么(其中前一个状态应该是状态A)。我在ui-router github文档页面中找不到它。

问Angular -ui-路由器获取以前的状态
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular -ui-路由器获取以前的状态EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular -ui-路由器获取以前的状态
EN