Question

我正在使用UI路由器，请参阅下面的快照

state('app.requistion', {
        url: "/requisition",
        templateUrl: 'order/customer-skills/tmpl/main_requisition.html',
        title: 'Requisition',
         abstract: true,
        resolve: loadSequence('ngTable', 'ngMap'),
        controller:'MainRequisitionCtrl',
        controllerAs:'mainReq',
        data: {
            module:'requisition'
        },
        ncyBreadcrumb: {
            label: 'Requisition'
        }
    }).state('app.requistion.create', {
        url: "/createRequisition",
        templateUrl: 'order/customer-skills/tmpl/customer_skills.html',
        title: 'Create Requisition',
        controller: 'CustSkillCtrl',
        controllerAs: 'custSkill',
        resolve: {
            jobTitles: function (CustSkillService) {
                return CustSkillService.fetchAllJobTitles();
            }
        },
        ncyBreadcrumb: {
            label: 'Create Requisition'
        }
    }).state('app.requistion.worklocation', {
        url: "/createRequisition/workLocations",
        templateUrl: 'order/work-locations/tmpl/workLocations.html',
        title: 'Select Work Locations',
        controller: 'WorkLocationCtrl',
        controllerAs: 'workLocation',
        resolve: {
            workLocations : function (WorkLocationService) {
                return WorkLocationService.fetchAllWorkLocations();
            }
        },
        ncyBreadcrumb: {
            label: 'Select Work Locations'
        }
    })

现在我有一个表单，我放在main_requisition.html中，点击顶部的向导链接，从一个页面导航到另一个页面......

<form name="mainReq.Form" id="form" novalidate>
        <div id="wizard" class="swMain">
            <!-- start: WIZARD SEPS -->
            <ul>
                <li ng-click="mainReq.form.goTo(mainReq.Form, 1)">
                    <a ui-sref="app.requistion.create" ng-class="{'selected' : mainReq.currentStep >= 1, 'done' : mainReq.currentStep > 1}">
                        <div class="stepNumber">
                            1
                        </div>
                        <span class="stepDesc text-small"> 
                        Order Dates + Customer Skills </span>
                    </a>
                </li>
                <li ng-click="mainReq.form.goTo(mainReq.Form, 2)">
                    <a ui-sref="app.requistion.worklocation" ng-class="{'selected' : mainReq.currentStep >= 2, 'done' : mainReq.currentStep > 2}">
                        <div class="stepNumber">
                            2
                        </div>
                        <span class="stepDesc text-small"> Select Work Locations </span>
                    </a>
                </li>
                ...............................

            </ul>
            <!-- end: WIZARD SEPS -->
            <div ui-view class="fade-in-up"></div>
        </div>
    </form>

现在如果表格有效，你只能从第1步转到第2步。我这样实现了......

 $rootScope.$on('$stateChangeStart', function (event, toState, toParams,
                             fromState, fromParams) {
                      ................
 //here canGoToStep is false if form is invalid         
 if(!canGoToStep) {

     event.preventDefault();
 }

现在问题出现了，当我在步骤中刷新页面时说出步骤2 .....

我收到空白，因为canGoToStep为false而preventDefault（）是烧成。
如果我删除了支票，我可以看到第2页重新加载了工作位置但是step1仍然无效
当我打印以下$ log.debug（fromState）时， $ log.debug（使用toState）; 和$ log.debug（$ state.current）。我收到以下输出

对象{name：＆＃34;＆＃34;，url：＆＃34; ^＆＃34;，views：null，abstract：true}

对象{url：＆＃34; / createRequisition / workLocations＆＃34;，templateUrl：＆＃34; order / work-locations / tmpl / workLocations.html＆＃34;，title：＆＃34;选择工作地点＆＃ 34;，控制器：＆＃34; WorkLocationCtrl＆＃34;，controllerAs：＆＃34; workLocation＆＃34; ...}

对象{name：＆＃34;＆＃34;，url：＆＃34; ^＆＃34;，views：null，abstract：true}

处理REFRESH的正确方法是什么？为什么当前状态变为空？

Answer 1

当前状态为null，因为$state.current事件上下文中的stateChangeStart返回您尝试导航的状态。刷新页面时没有以前的状态。我建议你检查当前状态是否为空（意味着它是初始加载），如果检查哪个表单有效并导航到第一个。或者默认情况下导航到第一个。像这样：

$rootScope.$on('$stateChangeStart', function (event, toState, toParams,
                                 fromState, fromParams) {
                          ................
    if(fromState.name == ''){
       event.preventDefault();
       //go to first valid state or go to first state in the list
    }
}

Angular ui路由器，多步骤表单验证和REFRESH

1 个答案: