Capturing document level keypress events in AngularJS

14,286 views
Skip to first unread message

Christopher Martin

unread,
Feb 13, 2013, 4:28:40 PM2/13/13
to ang...@googlegroups.com
Hi, I'm new to AngularJS and wondered if there was an alternate way of capturing keyup/keydown events from the document level in my controllers. 

The solution I came up with works fine, but seemed like a roundabout way of doing it.

Using v1.1.2, I'm adding the ng-keyup directive to the <html> tag and re-broadcasting the event:

  <html lang="en" ng-keyup="$broadcast('my:keyup', $event)">

And in my Controllers:

    $scope.$on('my:keyup', function(event, keyEvent) {
      console.log('keyup', keyEvent);
  });

I'm using the $routeProvider and ng-view to dynamically activate the controllers. I had originally tried to call a $scope function (set up by the controllers) from the ng-keyup directive but that didn't appear to work - I suspect it's a difference with multiple scopes in play (<html> outside the Controller/ng-view scope?)...still trying to wrap my head around it all.

Would it be possible to register an event listener using the $document service directly? Curious about best practice for this case.

Thanks!

Hatim Khan

unread,
Feb 13, 2013, 4:40:59 PM2/13/13
to ang...@googlegroups.com
Where is your ng-app controller?

Christopher Martin

unread,
Feb 13, 2013, 4:50:24 PM2/13/13
to ang...@googlegroups.com
On the document. I'm using angular-seed's async JS example:

On Wednesday, February 13, 2013 4:40:59 PM UTC-5, Hatim Khan wrote:
Where is your ng-app controller?

Hatim Khan

unread,
Feb 13, 2013, 5:09:22 PM2/13/13
to ang...@googlegroups.com
I meant, you might want to have an ng-controller directive on the html element side by side with the ng-keyup.  This way if you attach a function to the $scope of this controller, it should be visible to the ng-keyp. NOTE: I haven't tried 1.1.2 and ng-keyup.

Christopher Martin

unread,
Feb 13, 2013, 5:16:40 PM2/13/13
to ang...@googlegroups.com
Ah, understood. I hadn't considered that. I'll give that a shot. Thank you!

Christopher Martin

unread,
Feb 13, 2013, 5:53:41 PM2/13/13
to ang...@googlegroups.com
Hatim, that works:

<html lang="en" ng-controller="AppController" ng-keyup="keyup($event)">

var AppController = function($scope) {
    $scope.keyup = function(keyEvent) {
        console.log('keyup', keyEvent);
    };
};

This works great when you have the same key actions across the application (in my situation). 

My original post (re-broadcasting the event) might be a good fit if you needed different key actions depending on which "page" you're on in different controllers.

Thanks again for the alternate solution!

Michael Bielski

unread,
Feb 13, 2013, 5:55:29 PM2/13/13
to ang...@googlegroups.com
You might also take a look at the AngularUI Keypress directive: http://angular-ui.github.com/

Hatim Khan

unread,
Feb 13, 2013, 6:06:18 PM2/13/13
to ang...@googlegroups.com
Christopher:
No problem.  Thanks for letting us know that it worked for you.  I am also new to AngularJS so I can't comment on best practices.
Message has been deleted

Tomáš Reichmann

unread,
Jul 30, 2014, 6:27:39 AM7/30/14
to ang...@googlegroups.com
Hi!

I wonder, is there a way to bind document level keyup events on a specific view only?

I posted my problem on Stack overflow, but no solution yet :-/
http://stackoverflow.com/questions/25018422/what-is-a-correct-way-to-bind-document-level-key-events-in-angularjs-specific-on?noredirect=1

background:
I have a single page app that opens a gallery. I want to bind document level keyup event (for keyboard gallery controlls) only when the gallery is open, ie. when route matches

Demo (Click on "Fotografie" to open the gallery) http://tr.tomasreichmann.cz/

I have a jQuery background, so my instincts don't do me well. Anyway, binding the event on HTML through directive seems ... inellegant. Is there a way to bind it discreetly perhaps inside the controller code? I only need the event to register at a specific route.

Thanks for your time and effort. It's greatly appreciated.
Reply all
Reply to author
Forward
0 new messages