Javascript angular中的按键事件问题

我是新手，非常感谢你的帮助。我正在制作一个应用程序，它有不同的区域，让我们称之为页面（尽管它实际上是一个1页的应用程序），我自然会使用不同的视图，并且我有一个与主体、样式和脚本等相同的布局

我遇到了一个问题，我只想在应用程序的一个页面中收听键盘事件，该页面是交互式的，而其他页面是管理性的。我可以将键盘事件绑定到输入、文档或正文。输入不合适，我的文档和正文都是全局的，我不想监听我应用程序中的每个按键

我该怎么做才能解决这个问题呢

我的代码在这里：

我使用jQuery作弊，并将事件绑定到特定页面控制器中的主体，但Angular的反应不像事件发生一样

$('body').keydown(function(e) {
            $scope.changeIndex(e);
});

然后我读到我必须使用$scope。$apply（）；我在事件触发的changeIndex函数的底部执行了此操作

这实际上是可行的，但当我通过单击事件调用changeIndex时，这是控制UI的另一种方式

   <div class="practice-controls-bottom">
        <i ng-click="changeIndex('down');" class="icon-thumbs-down icon-4x thumbs-down"></i>
        <i ng-click="changeIndex('up');" class="icon-thumbs-up icon-4x thumbs-up pull-right"></i>
    </div>

Angular给了我一个错误：

Error: $apply already in progress
    at Error (<anonymous>)
    at g (http://localhost:3000/lib/angular/angular.min.js:85:37)
    at Object.e.$apply (http://localhost:3000/lib/angular/angular.min.js:89:129)
    at Object.$scope.changeIndex (http://localhost:3000/js/controllers/practice.js:173:20)

错误：$apply已在进行中
错误（）
在g(http://localhost:3000/lib/angular/angular.min.js:85:37)
在Object.e.$apply(http://localhost:3000/lib/angular/angular.min.js:89:129)
在对象处。$scope.changeIndex(http://localhost:3000/js/controllers/practice.js:173:20)

---

期待一些建议。谢谢

您可以尝试以下任一解决方案

在keydown处理程序中调用$scope.$apply，而不是changeindex方法

$('body').keydown(function (e) {
    $scope.$apply(function () {
        $scope.changeIndex(e);
    })
});

或者在

changeIndex

中再次调用$apply之前，检查代码是否在应用/摘要周期内运行

if(!$scope.$$phase){
    $scope.$apply()
}

---

你看过ng keypress、ng keyup、ng keydown指令吗？这样，您只能在视图中的元素上设置指令，您必须听按键

文件：

编辑：添加

tabindex=“0”

以在任何元素上启用关键事件

下面是一个工作演示：

html

<div ng-keypress="changeIndex($event)" tabindex="0">Something</div>

Angular UI中还有一个指令，允许您将键组合与函数相关联

<div ui-keypress="{13:'changeIndex($event)'}"></div>

谢谢，我确实尝试过这个，但我没有运气将按键绑定到div，我甚至试图强制将焦点放在它上以查看它是否有效，但没有运气。原因是您必须向div添加

tabindex=“0”

，才能启用键事件！它对任何元素都有效。我会试试，如果有效的话会很棒，谢谢！你可以看看演示，并看到它的工作希望！美好的很高兴我能帮助你。你的最后一个代码块是检查摘要循环是否正在运行。尽管有小的打字错误：

$scope.$apply（）

<div ui-keypress="{13:'changeIndex($event)'}"></div>