Javascript AngularJS-带UI路由器的多步骤表单，并使用箭头键导航

如何使用箭头键转到下一个或上一个表单步骤。我正在使用AngularJS UI路由器。下面的代码可以使用prev和next按钮进行导航

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider    
        // route to show our basic form (/form)
        .state('wsp', {
            url: '/wsp',
            templateUrl: 'wsp_step',
            controller: 'wspYearController'
        })

        .state('wsp.first_step', {
            url: '/first_step',
            templateUrl: 'wsp_step_first'
        })

        .state('wsp.second_step', {
            url: '/second_step',
            templateUrl: 'wsp_step_second'
        })


    $urlRouterProvider.otherwise('/wsp/first_step');
})

我这样做是为了进入不同的阶段

<button type="button" ui-sref="wsp.first_step">Prev </button>
<button type="button" ui-sref="wsp.third_step">Next</button>

Prev
下一个

给你。带有自处理事件的

按键下事件侦听器

，在

$stateChange

之前/之后解除绑定和绑定

ng keydown

在这里对您没有帮助=（.让我们希望AngularJS中的键处理会得到改进。您可以将其添加到您的

wspYearController

（如果它在您谈论的所有路线中都使用的话）中

---

这是一个演示。

给你。一个带有自处理事件的

按键事件侦听器

在

$stateChange

之前/之后解除绑定和绑定，在这里对你没有帮助=（.让我们希望AngularJS中的键处理功能会得到改进。您可以将其添加到您的

wspYearController

（如果您所说的所有路由都使用它的话）中

---

这是一个示例，它向您展示了它。

根据按下的键，这不起作用。您必须将左右箭头分开。确实如此，并且现在就包括它。您想要一个工作示例@PaulsonPeter？您能提供一个工作示例吗，因为我得到了“$state未定义”错误您正在解析

$state

到你的控制器？这是一个AngularJS basic，请检查此链接：是的，它正在工作，但返回后它不会再移动到前面。这是处理此类情况的正确方法吗？根据按下的键，这不起作用。你必须将左箭头和右箭头分开。确实如此，并且现在包含它。你想要一个工作示例吗@PaulsonPeter？当我得到“$state未定义”错误时，你能提供一个工作示例吗？你正在解析

$state

到你的控制器吗？这是一个AngularJS basic，请检查此链接：是的，它正在工作，但返回后不会再移动到前面。这是处理此类情况的正确方法吗？

/**
 * Key press binding
 */
$(document).keydown(function(e) {

    switch(e.which) {
        case 37: // left arrow
        case 39: // right arrow

            //clean listener before state change 
            //else it would be listen all the time :)
            $(document).unbind('keydown');

            //back and forward all the time to the right place.
            if ($state.current.name === 'wsp.first_step') {
                $state.go('wsp.second_step');
            } else {
                $state.go('wsp.first_step');
            }
            break;

        default: return; // exit this handler for other keys
    }

    // prevent the default action (scroll / move caret)
    e.preventDefault();
});