Question

我是Angular的新手，非常感谢帮助。我正在创建一个具有不同区域的应用程序，让我们称之为页面（即使它确实是一个1页的应用程序），我自然会使用不同的视图，并且我有一个与主体，样式和脚本等共同的布局。

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

我应该怎样做才能解决Angular中的这个问题？

我的代码在这里：https://github.com/mgenev/geminiFc/blob/master/public/js/controllers/practice.js

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

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

然后我读了我必须使用$ scope。$ apply（）;我在事件触发的changeIndex函数的底部做了。

这实际上有效，但当我通过click事件调用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)

期待一些建议。谢谢！

Answer 1

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

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

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

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

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

Answer 2

您是否看过ng-keypress，ng-keyup，ng-keydown指令？这样，您只能在视图内的元素上设置指令，您必须听取按键。

Doc：http://docs.angularjs.org/api/ng.directive:ngKeypress

编辑：添加tabindex="0"以启用任何元素的关键事件。

这是一个有效的演示：http://plnkr.co/edit/whXgmQU1pKjuRqvokC2Z

<强> HTML

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

<强> JS

app.controller('MyCtrl', [function($scope) {
    $scope.changeIndex = function($event) {
        // $event.keyCode...
    }
}]);

Angular-UI http://angular-ui.github.io/ui-utils/中还有一个指令，可让您将关键组合与功能相关联。

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

角度按键事件的问题

2 个答案: