Question

我正在实施一个多步骤向导视图，用于接受用户的数据。路由工作正常。我唯一要努力的是如何在显示下一步之前验证在此状态下收到的数据。

我现在拥有的是配置。当我们执行$stateChangeStart（或其他替代方法，例如更改网址的哈希）时，问题是$state.go事件被触发。所以，每次我这样做，$state.go它都会触发$stateChangeStart事件，而且似乎陷入无限循环。

有什么建议吗？

    app.run(function($rootScope,$state,$http){
        $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
            var validationUrl = fromState.validationUrl;

            if(validationUrl){ // we don't need validation for the very first step.
                event.preventDefault();
                var validationPromise = $http.post(validationUrl);

                validationPromise.then(function(){
                    $state.go(toState,toParams);
                });

                validationPromise.catch(function(){
                    console.log('errors');
                });
            }
        });

编辑：可能需要的其他数据。

这是我的StepsFactory

define(function(){
    return {
        step1:{
            template:'templates/step1-tab.html',
            controller:'StepsController',
            validationUrl:'/validateStep1'
        },
        step2:{
            template:'templates/step2-tab.html',
            controller:'StepsController',
            validationUrl:'/valudateStep2'
        }
    };
});

路由配置

    app.config(function($stateProvider, $urlRouterProvider){
        $urlRouterProvider.otherwise('application');

        $stateProvider
        .state('step1',{
            url:'/step1',
            templateUrl:StepsFactory.step1.template,
            controller: StepsFactory.step1.controller,
            validationUrl:StepsFactory.step1.validationUrl,
            stateConfig:StepsFactory.step1
        })
        .state('create',{
            url:'/create',
            abstract:true,
            templateUrl:'templates/create-substeps.html',
            controller:'AbstractStepsController'
        })
        .state('create.step2',{
            url:'/step2',
            //templateUrl:StepsFactory.step2.template
        });
    });

请忽略语法错误（如果有的话），我直接从源代码粘贴。但是除了那个使代码陷入无限循环的问题之外，一切都正常工作。

Answer 1

最后设法通过一些黑客来解决它，我承认我仍然不明白这是如何或为什么有效！我只知道这是有效的。

Hacky方式。

    app.run(function($rootScope,$state,$http){
        var shouldSkip;
        $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
            if(shouldSkip) return;
            var validationUrl = fromState.validationUrl;

            if(validationUrl){ // we don't need validation for the very first step.
                event.preventDefault();
                var validationPromise = $http.post(validationUrl);

                validationPromise.then(function(){
                    shouldSkip=true;
                    $state.go(toState,toParams);
                });

                validationPromise.catch(function(){
                    shouldSkip=false;
                    console.log('errors');
                });
            }
        });

UI路由器 - 状态更改验证

1 个答案: