Question

我有三种不同的父状态，每种状态都有一组url参数。他们分享一些相同的参数，但并非总是如此，例如：

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

我正在尝试设置在切换状态时进行一些验证的功能。

例如，假设用户位于state1，其网址为state1?start=20160101&end=20160131并点击指向state2的链接，但在state2中，只有一个日期（end），它只需要一年（例如2016），所以我需要加载state2，但更改end参数以获得不同的值。

我尝试过使用以下内容：

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

我的问题是我遇到了一个无限循环。

我希望能够执行任意数量的param验证，并在需要时进行param更改。我正在谈论这是正确的方法吗？

使用angular ui-router 1.0.0-alpha.3

谢谢！

Answer 1

我能够使用简单的逻辑解决这个问题，不允许无限循环：

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参数

1 个答案: