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屋！