Support <div (keyup.enter)="callback">

Depends on #439

It would be nice to create pseudo events on keys. So keyup and keydown would further be extended with: space, enter, shift.enter, key_a, and so on. It would need to understand, named keys, letters, modifiers.

The implementation can be done through the event manager (see #439)

[ghost]

I’ve got another idea that I would like to share, since you’re investigating. This probably belongs in a separate issue but it is a scenario particularly relevant with keyboard events, so I’ll start here.

I’ve built apps (Smart TV prototypes) where I wanted to use the scope/context to maintain the life cycle of a key binding, but not bind it to the DOM element that the attribute is used on (I needed it on the document so the handler would trigger regardless of the focused element position). So, the way I approach this in Angular 1.x is write my own directives to bind everything to the document, and use the scope to create/destroy the bindings at appropriate moments.

When I translate my approach to 2.x syntax, it could look like this: (Not sure if you’re still using the | character for these situations. I intend it to be the same syntax as for referencing an item in NgRepeat.)

<modal #modal (^keydown.esc|document)="modal.close()">
  <dropdown #dropdown (^keydown.esc|document)="dropdown.close()"></dropdown>
</modal>

In addition, in the case of having multiple bindings with the same key, I often needed a way to distinguish between scenarios where multiple handlers should be called, and scenarios where only the one with the highest priority should be called (in my case the scope that was created last, usually had the highest priority).

In the modal+dropdown example, it would enable you to specify that when pressing esc, only the dropdown is closed, and when pressing it again, the modal is closed. In my projects I did this by returning false in the expression, simply because I haven’t thought of anything better yet. It has some resemblance to stopPropagation(), maybe there’s inspiration to take from that in designing a better syntax.

<modal #modal (^keydown.esc|document)="modal.close()">
  <dropdown #dropdown (^keydown.esc|document)="dropdown.close(); return false;"></dropdown>
</modal>

For me, these would be very nice additions to keyboard handling that I would use often. It helped me to keep the controllers very clean, and easily control key binding life cycles even when they’re all on the document.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}