What is AngularJS way to create global keyboard shortcuts?

by

I would say a more proper way (or “Angular way”) would be to add it to a directive. Here’s a simple one to get you going (just add keypress-events attribute to <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);
        });
      }
    };
  }
]);

In your directive you can then simply do something like this:

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>'
    };
  }
]);

More Related Contents:

  1. Delaying AngularJS route change until model loaded to prevent flicker
  2. AngularJS : Initialize service with asynchronous data
  3. Way to ng-repeat defined number of times instead of repeating over array?
  4. What is the difference between angular-route and angular-ui-router?
  5. Call AngularJS from legacy code
  6. Migrating AngularJS to Angular 4,5 (with DEMO) [closed]
  7. AngularJS sorting by property
  8. Angularjs – ng-cloak/ng-show elements blink
  9. How to add many functions in ONE ng-click?
  10. How to trigger ngClick programmatically
  11. How to reload or re-render the entire page using AngularJS
  12. Ng-model does not update controller value
  13. Angularjs “Controller as” or “$scope”
  14. How to set the id attribute of a HTML element dynamically with angularjs (1.x)?
  15. How to filter by object property in angularJS
  16. password-check directive in angularjs
  17. AngularJS – Image “onload” event
  18. Composing multipart/form-data with a different Content-Type on each parts with Javascript (or Angular)
  19. What is the elegant way to get the latest date from array of objects in client side?
  20. AngularJS Directives: Change $scope not reflected in UI
  21. Angular.js. How to count ng-repeat iterations which satisfy the custom filter
  22. CORS: credentials mode is ‘include’
  23. Angularjs does not load scripts within ng-view
  24. Print a div using javascript in angularJS single page application
  25. How can I use HTTPS in AngularJS?
  26. Show pop-ups the most elegant way
  27. AngularJS: lazy loading controllers and content
  28. Is it a bad practice to use jQuery in Angular? [closed]
  29. Rename Object Key in an array using javascript
  30. Function Called Multiple Times in AngularJS Repeat Section

Leave a Comment