4

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

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

我应该怎么做才能在 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 函数的底部所做的。

这确实有效，但是当我通过单击事件调用 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)

期待一些建议。谢谢！

4

2 回答 2

5

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

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

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

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

if(!$scope.$$phase){
    $scope.$apply()
}
于 2013-10-08T03:16:53.230 回答
2

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

文档：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>
于 2013-10-08T03:21:33.113 回答