Question

我的问题是：

我有一个列出表格内容的网页。当然，有分页，我想用键盘箭头遍历。

同时，用户可以点击表格中的任何记录，这将打开一个模式对话框（来自twitter-bootstrap），该对话框还包含下一个/上一个记录功能，目前只能通过按钮使用。我希望能够用键盘箭头控制它，但如果打开模态对话框，主页面页面不会被翻转。

我已尝试在主页面控制器中使用$ document.bind，但它无法正常工作，变量侦听器未被触发。

示例代码是：

<script>
    function Controller($scope, $document)
    {
        $scope.page = 1;

        $scope.$watch('page', function()
        {
            console.log('this is not logged on key press');
        });

        $document.bind('keyup', function(event)
        {
            if (event.which === 37) // <-
            {
                if ($scope.page === 1)
                {
                    return;
                }

                $scope.page--;
                console.log('this is logged');
            }
            else if (event.which === 39) // ->
            {
                if ($scope.page === $scope.numPages)
                {
                    return;
                }

                $scope.page++;
                console.log('this is logged');
            }
        });
    }
</script>
<div ng-controller="Controller">
</div>

我尝试的另一件事只是模态对话框是绑定<div class="modal-body" ng-keyup="changeRecord($event)">，但由于某种原因，只有焦点在模态对话框中的输入字段时才有效。当我点击模态对话框中的任何其他位置时，changeRecord函数不再被调用，这至少可以说是奇怪的。

这个问题的正确解决方案是什么？

我当然不喜欢$document上的绑定，只是感觉不对。

编辑：

这是我当前的解决方案完全符合预期，但有点像hackish：http://pastebin.com/ZiK8Mt8e 如果你能提出任何更好，也就是如此简短的建议，请继续。我当然不想使用另一个库来处理2个键盘按钮。

angularjs在任何地方听按键，在控制器中做出不同的反应

0 个答案: