Angular UI Router - chnage state based on Keydown

Question

I wish to change states based on keypresses - i.e. M key loads menu, G key loads Guide - they are completely separate views.

I am working on the assumption, in a global directive that I can do

$document.on 'keydown', ( event ) ->
    if event.keyCode == 77
        $state.go 'mainMenu'

However when the view is destoryed it is still answering to these key presses, I want to effectively stop that

In the directive handling the view

I have

scope.$on '$destroy', ->
    $document.off( 'keydown' )

However this would then stop all keys being published by the global directive

Any help appreciated on basically handling key navigation throughout a multi-state app

many thanks

Answer 1

$on actually returns the event-listener destroyer function (or $off if you will) so i believe

var unsubscribeKeyDown = $document.on 'keydown', ( event ) ->
    if event.keyCode == 77
        $state.go 'mainMenu'

And

scope.$on '$destroy', ->
    unsubscribeKeyDown();

Should do it.

Check out this answer.