ui-router:在状态更改期间验证和更改url参数 [英] ui-router: validate and alter url params during state change
问题描述
我有三个不同的父状态,每个父状态都有一组url参数. 它们共享一些相同的参数,但不总是相同,例如:
I have three different parent states that each have a set of url parameters. They share some of the same params, but not always, for example:
$stateProvider
.state('state1',{
url : 'state1',
params : {
start : {value: null, squash : true, dynamic : true},
end : {value: null, squash : true, dynamic : true},
tz : {value: 'Eastern', squash: true, dynamic : true}
}
}
.state('state2',{
url : 'state2',
params : {
end : {value: null, squash : true, dynamic : true}
}
}
.state('state3',{
url : 'state3',
params : {
start : {value: null, squash : true, dynamic : true},
end : {value: null, squash : true, dynamic : true},
tz : {value: 'Eastern', squash: true, dynamic : true},
period : {value: 'Quarter', squash: true, dynamic : true}
}
}
我正在尝试设置在切换状态时进行一些验证的功能.
I'm trying to set up the ability to do some validation when switching states.
例如,假设用户位于state1
中,其URL为state1?start=20160101&end=20160131
,然后单击指向state2
的链接,但是在state2
中,只有一个日期(end
),并且只需要一年(例如2016年),因此我需要加载state2
,但要更改end
参数以使其具有不同的值.
For example, let's say the user is in state1
with a url of state1?start=20160101&end=20160131
and clicks a link to state2
, but in state2
, there is only one date (end
), and it only takes the year (eg. 2016), so I need to load state2
but change the end
param to have a different value.
我尝试使用以下内容:
angular.module('myApp',[ui.router,ui.router.default])
.run(['$transitions','$state',runFunction]);
function runFunction($transitions,$state){
var match = {
to: 'state2',
from: 'state1'
};
$transitions.onBefore(match,function($transitions$,$state){
var fromParams = $transition$.params('from');
var toParams = $transition$.params('to');
if(fromParams.end){
toParams.end = fromParams.end.substr(0,4);
}else{
toParams.end = '2016';
}
return $state.transitionTo($transition$.to().name, toParams);
}
}
我的问题是我陷入了无限循环.
My issue with this is that I run into an infinite loop.
我希望能够执行任意数量的参数验证,并在需要时进行参数更改.我要这样做是正确的方法吗?
I'd like the ability to perform any number of param validations, and make param changes if need be. Am I going about this is the right way?
使用角度ui路由器1.0.0-alpha.3
Using angular ui-router 1.0.0-alpha.3
谢谢!
推荐答案
我能够使用简单的逻辑来解决此问题,以免发生无限循环:
I was able to resolve this using simple logic to not allow infinite loop:
angular.module('myApp',[ui.router,ui.router.default])
.run(['$transitions','$state',runFunction]);
// variables outside the run function
var params = {};
var transition_count = 0;
function runFunction($transitions,$state){
var match = {
to: 'state2',
from: 'state1'
};
$transitions.onBefore(match,function($transitions$,$state,$q){
var deferred = $q.defer();
var target = true;
var origParams = $transition$.params('from');
var first_loop = transition_count === 0 ? true: false;
if(first_loop){
params = $transition$.params('from');
}
if(origParams .end){
params .end = origParams .end.substr(0,4);
target = false;
}else{
params .end = '2016';
target = false;
}
if(!target){
$state.go($transition$.to().name, params);
transtion_count++;
}else{
params = {}; // reset the params to empty object
transition_count = 0; // reset transition_count
}
deferred.resolve(target);
}
return deferred.promise;
}
这篇关于ui-router:在状态更改期间验证和更改url参数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!