Я полагаю, что я должен использовать директиву, но кажется странным добавлять директиву в тело, но слушать события в документе.
Каков правильный способ сделать это?
UPDATE: нашел пользовательский интерфейс AngularJS и увидел их реализацию директивы keypress.
Вот как я это сделал с jQuery - я думаю, что там лучший способ.
var app = angular.module('angularjs-starter', []);
app.directive('shortcut', function() {
return {
restrict: 'E',
replace: true,
scope: true,
link: function postLink(scope, iElement, iAttrs){
jQuery(document).on('keypress', function(e){
scope.$apply(scope.keyPressed(e));
});
}
};
});
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.keyCode = "";
$scope.keyPressed = function(e) {
$scope.keyCode = e.which;
};
});
<body ng-controller="MainCtrl">
<shortcut></shortcut>
<h1>View keys pressed</h1>
{{keyCode}}
</body>
Я бы сказал, что более правильным способом (или "Angular way" ) было бы добавить его в директиву. Здесь вы можете просто сделать это (просто добавьте атрибут keypress-events в <body>):
angular.module('myDirectives', []).directive('keypressEvents', [
'$document',
'$rootScope',
function($document, $rootScope) {
return {
restrict: 'A',
link: function() {
$document.bind('keypress', function(e) {
console.log('Got keypress:', e.which);
$rootScope.$broadcast('keypress', e);
$rootScope.$broadcast('keypress:' + e.which, e);
});
}
};
}
]);
В вашей директиве вы можете просто сделать что-то вроде этого:
module.directive('myDirective', [
function() {
return {
restrict: 'E',
link: function(scope, el, attrs) {
scope.keyPressed = 'no press :(';
// For listening to a keypress event with a specific code
scope.$on('keypress:13', function(onEvent, keypressEvent) {
scope.keyPressed = 'Enter';
});
// For listening to all keypress events
scope.$on('keypress', function(onEvent, keypressEvent) {
if (keypress.which === 120) {
scope.keyPressed = 'x';
}
else {
scope.keyPressed = 'Keycode: ' + keypressEvent.which;
}
});
},
template: '<h1>{{keyPressed}}</h1>'
};
}
]);
Используйте $document.bind:
function FooCtrl($scope, $document) {
...
$document.bind("keypress", function(event) {
console.debug(event)
});
...
}
Я не могу ручаться за него, но я начал смотреть на AngularHotkeys.js:
http://chieffancypants.github.io/angular-hotkeys/
Будет обновляться с дополнительной информацией, когда у меня будут свои зубы.
Обновление 1: О, там пакет nuget: angular -hotkeys
Обновление 2: на самом деле очень простое в использовании, просто настройте свою привязку на своем маршруте или, как я делаю, в вашем контроллере:
hotkeys.add('n', 'Create a new Category', $scope.showCreateView);
hotkeys.add('e', 'Edit the selected Category', $scope.showEditView);
hotkeys.add('d', 'Delete the selected Category', $scope.remove);
Вот пример службы AngularJS для быстрых клавиш: http://jsfiddle.net/firehist/nzUBg/
Затем его можно использовать следующим образом:
function MyController($scope, $timeout, keyboardManager) {
// Bind ctrl+shift+d
keyboardManager.bind('ctrl+shift+d', function() {
console.log('Callback ctrl+shift+d');
});
}
Обновление: Теперь я использую angular-hotkeys.
Как директива
Это, по существу, то, как это делается в коде документации Angular, т.е. нажатие / для начала поиска.
angular
.module("app", [])
.directive("keyboard", keyboard);
function keyboard($document) {
return {
link: function(scope, element, attrs) {
$document.on("keydown", function(event) {
// if keycode...
event.stopPropagation();
event.preventDefault();
scope.$apply(function() {
// update scope...
});
}
};
}
Запуск с использованием директивы клавиатуры
http://plnkr.co/edit/C61Gnn?p=preview
Как служба
Преобразование этой директивы в сервис очень просто. Единственное реальное различие заключается в том, что область не отображается в сервисе. Чтобы вызвать дайджест, вы можете ввести $rootScope или использовать $timeout.
function Keyboard($document, $timeout, keyCodes) {
var _this = this;
this.keyHandlers = {};
$document.on("keydown", function(event) {
var keyDown = _this.keyHandlers[event.keyCode];
if (keyDown) {
event.preventDefault();
$timeout(function() {
keyDown.callback();
});
}
});
this.on = function(keyName, callback) {
var keyCode = keyCodes[keyName];
this.keyHandlers[keyCode] = { callback: callback };
return this;
};
}
Теперь вы можете зарегистрировать обратные вызовы в своем контроллере с помощью метода keyboard.on().
function MainController(keyboard) {
keyboard
.on("ENTER", function() { // do something... })
.on("DELETE", function() { // do something... })
.on("SHIFT", function() { // do something... })
.on("INSERT", function() { // do something... });
}
Альтернативная версия Plunk с помощью службы
Несколько более короткий ответ - просто посмотрите на решение 3 ниже. Если вы хотите узнать больше вариантов, вы можете прочитать все это.
Я согласен с jmagnusson. Но я считаю, что есть более чистое решение. Вместо того, чтобы связывать ключи с функциями в директиве, вы должны просто привязать их в html, как определение файла конфигурации, а горячие клавиши должны быть контекстуальными.
Ниже приведена версия, в которой используется ловушка мыши с пользовательской директивой. (Я не был автором этой скрипки.)
var app = angular.module('keyExample', []);
app.directive('keybinding', function () {
return {
restrict: 'E',
scope: {
invoke: '&'
},
link: function (scope, el, attr) {
Mousetrap.bind(attr.on, scope.invoke);
}
};
});
app.controller('RootController', function ($scope) {
$scope.gotoInbox = function () {
alert('Goto Inbox');
};
});
app.controller('ChildController', function ($scope) {
$scope.gotoLabel = function (label) {
alert('Goto Label: ' + label);
};
});
Вам нужно будет включить mousetrap.js, и вы будете использовать его, как показано ниже:
<div ng-app="keyExample">
<div ng-controller="RootController">
<keybinding on="g i" invoke="gotoInbox()" />
<div ng-controller="ChildController">
<keybinding on="g l" invoke="gotoLabel('Sent')" />
</div>
</div>
<div>Click in here to gain focus and then try the following key strokes</div>
<ul>
<li>"g i" to show a "Goto Inbox" alert</li>
<li>"g l" to show a "Goto Label" alert</li>
</ul>
</div>
В решении вам необходимо включить mousetrap.js, который является библиотекой которые помогут вам определить горячие клавиши.
Если вы хотите избежать проблем, чтобы разработать свой собственный директиву, вы можете проверить этот lib:
https://github.com/drahak/angular-hotkeys
И этот
https://github.com/chieffancypants/angular-hotkeys
Второй вариант обеспечивает немного больше возможностей и гибкости, т.е. автоматически созданный чит-лист с горячим ключом для вашего приложения.
Обновить: решение 3 больше не доступно из Angular ui.
Помимо вышеизложенных решений, выполняется еще одна реализация командой angularui. Но недостатком является то, что решение зависит от JQuery lib, который не является трендом в сообществе Angular. (Angular сообщество попытается просто использовать jqLite, который поставляется с угловыми и избегайте излишних зависимостей.) Вот ссылка
Использование таково:
В вашем html используйте атрибут ui-keydown для привязки ключа и функций.
<div class="modal-inner" ui-keydown="{
esc: 'cancelModal()',
tab: 'tabWatch($event)',
enter: 'initOrSetModel()'
}">
В своей директиве добавьте эти функции в свою область действия.
app.directive('yourDirective', function () {
return {
restrict: 'E',
templateUrl: 'your-html-template-address.html'
link: function(){
scope.cancelModal() = function (){
console.log('cancel modal');
};
scope.tabWatch() = function (){
console.log('tabWatch');
};
scope.initOrSetModel() = function (){
console.log('init or set model');
};
}
};
});
После игры со всеми решениями я бы рекомендовал тот, который был реализован командой Angular UI, решение 3, которое избегало многих мелких странных проблем, с которыми я столкнулся.
Я сделал службу для ярлыков.
Похоже:
angular.module('myApp.services.shortcuts', [])
.factory('Shortcuts', function($rootScope) {
var service = {};
service.trigger = function(keycode, items, element) {
// write the shortcuts logic here...
}
return service;
})
И я ввел его в контроллер:
angular.module('myApp.controllers.mainCtrl', [])
.controller('mainCtrl', function($scope, $element, $document, Shortcuts) {
// whatever blah blah
$document.on('keydown', function(){
// skip if it focused in input tag
if(event.target.tagName !== "INPUT") {
Shortcuts.trigger(event.which, $scope.items, $element);
}
})
})
Это работает, но вы можете заметить, что я вставляю $element и $document в контроллер.
Это плохая практика контроллера и нарушает "НЕОБХОДИМО получить доступ к элементу $в соглашении с контроллером".
Я должен поместить его в директиву, а затем использовать "ngKeydown" и $event для запуска службы.
Но я думаю, что сервис прекрасен, и я скорее доработаю контроллер.
обновление:
Кажется, что "ng-keydown" работает только во входных тегах.
Поэтому я просто пишу директиву и вставляю $document:
angular.module('myApp.controllers.mainCtrl', [])
.directive('keyboard', function($scope, $document, Shortcuts) {
// whatever blah blah
return {
link: function(scope, element, attrs) {
scope.items = ....;// something not important
$document.on('keydown', function(){
// skip if it focused in input tag
if(event.target.tagName !== "INPUT") {
Shortcuts.trigger(event.which, scope.items, element);
}
})
}
}
})
Это лучше.
Отметьте этот пример от парней behid ng-newsletter.com; проверьте их учебник по созданию игры 2048, у него есть хороший код, использующий службу для событий клавиатуры.
Ниже вы можете написать всю свою логику ярлыков в своем контроллере, и директива позаботится обо всем остальном.
Директива
.directive('shortcuts', ['$document', '$rootScope', function($document, $rootScope) {
$rootScope.shortcuts = [];
$document.on('keydown', function(e) {
// Skip if it focused in input tag.
if (event.target.tagName !== "INPUT") {
$rootScope.shortcuts.forEach(function(eventHandler) {
// Skip if it focused in input tag.
if (event.target.tagName !== 'INPUT' && eventHandler)
eventHandler(e.originalEvent, e)
});
}
})
return {
restrict: 'A',
scope: {
'shortcuts': '&'
},
link: function(scope, element, attrs) {
$rootScope.shortcuts.push(scope.shortcuts());
}
};
}])
контроллер
$scope.keyUp = function(key) {
// H.
if (72 == key.keyCode)
$scope.toggleHelp();
};
Html
<div shortcuts="keyUp">
<!-- Stuff -->
</div>
вы можете попробовать эту библиотеку, она очень упростила управление горячими клавишами, она автоматически связывает и разворачивает ключи при навигации по приложению
Я не знаю, действительно ли это angular, но что я сделал
$(document).on('keydown', function(e) {
$('.button[data-key=' + String.fromCharCode(e.which) + ']').click();
});
<div class="button" data-key="1" ng-click="clickHandler($event)">
ButtonLabel
</div>