Menu
I've started using the angular-ui keypress module and was wondering if there is a way to make global shortcut keys which work no matter where I'm placed within the body.
I've tried linking my ui-keydown to the body but as it's not in focus the key events are not fired.
eg:
<body ui-keydown="{'pageup':'nav_to($event, \'users\')'}">
I know I could just focus a div and attach the key bindings to that but what happens when I have a form and I want to access all the global key bindings within each field?
343
In an Angular template, a binding creates a live connection between a part of the UI created from a template (a DOM element, directive, or component) and the model (the component instance to which the template belongs).
But the downside is the solution depends on JQuery lib which is not the trend in the angular community. (Angular community try to just use the jqLite that comes with angularjs and get away from overkilled dependencies.) Here is the link In your html, use the ui-keydown attribute to bind key and functions.
Angular uses the syntax [ (<property>)] for two-way data binding. We’re using the ngModel directive here to to bind review to the input value. The two-way binding syntax is actually short hand for a combination of property binding and event binding.
Angular provides many kinds of data-binding. Binding types can be grouped into three categories distinguished by the direction of data flow: From the source-to-view; From view-to-source; Two-way sequence: view-to-source-to-view
Try this in your main app controller:
angular.element($window).on('keydown', function(e) {
console.log(e);
});
You can make a controller and set it on the body tag, and set a key event callback as well:
<body ng-controller="keycontroller" ui-keyup="{'enter':'callback($event)'}" >
<input type="text" ng-model="test1" />
<input type="text" ng-model="test2" />
</body>
And then set :
function keycontroller($scope) {
$scope.test1= "It should work here...";
$scope.test2= "...and also here.";
$scope.callback = function fn($event) {
console.log("Enter key pressed");
};
}
var app = angular.module("app", ['ui.keypress']);
app.controller("keycontroller", keycontroller);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
