ui-router: validate and alter url params during state change

问题

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.

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.

I've tried using the following:

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?

Using angular ui-router 1.0.0-alpha.3

Thanks!!

回答1:

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

来源：https://stackoverflow.com/questions/37736976/ui-router-validate-and-alter-url-params-during-state-change