проблемы с событиями нажатия клавиш в угловом

Question

Я новичок в Angular, помощь будет высоко оценена. Я создаю приложение, которое имеет разные области, назовем его страницами (хотя это действительно приложение с 1 страницей), для которого я, естественно, использую разные представления, и у меня есть общий макет с телом, стилями и сценариями и т. Д.

У меня возникла проблема, когда я хочу слушать события клавиатуры только на одной из страниц приложения, которая должна быть интерактивной, а другие - административной. Я могу связать события клавиатуры с входами или документом или телом. Вход не подходит, и мой документ и тело являются глобальными, и я не хочу слушать каждое нажатие клавиши в моем приложении.

Что я должен сделать, чтобы решить эту проблему в угловом?

Моего кода здесь: https://github.com/mgenev/geminiFc/blob/master/public/js/controllers/practice.js

Я изменял с JQuery и связал это событие к телу в контроллере для конкретной страницы, но Угловой не реагировали, как произошло событие.

$('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> 

Угловая дает мне ошибку:

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 обработчика вместо метода changeindex

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

или проверить, является ли код выполняется в пределах применить/переваривать цикл перед вызовом $ применять в changeIndex снова как

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

Answer 2

ли вы посмотрите на нг-нг, нажатием клавиши-KeyUp, нг-KeyDown директивы? Таким образом, вы можете установить только директиву элемента внутри представления, которое вы должны прослушать нажатием клавиш.

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

EDIT: Добавить 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... 
    } 
}]); 

Существует также директива угловыми-UI http://angular-ui.github.io/ui-utils/, которые позволяют ассоциировать ключ сочетания с функциями.

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