1

矢印キーを使用して次または前のフォーム ステップに移動するにはどうすればよいですか。AngularJS UI ルーターを使用しています。以下のコードは、ナビゲートする前と次のボタンで正常に動作します。

.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>
4

1 に答える 1

0

はい、どうぞ。自己処理イベントのkeydown event listenerバインド解除とバインドの before/after を使用する$stateChange。ng-keydown=(ここでは役に立ちません。AngularJSでキー処理が改善されることを願っています。これをあなたに追加することで問題ないはずですwspYearController(あなたが話しているすべてのルートで使用されている場合)。

/**
 * 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();
});

これは、そのデモンストレーションを示すプランカーです。

于 2016-12-05T09:16:32.647 に答える