I'm having trouble implementing a keyboard layout in my AngularJS app. The goal is to have the displayed letters change to match the corresponding keys on the keyboard when the shift key is pressed. I've created a function in my controller to handle the shift keydown event and pass that information to a directive, but nothing seems to be displaying on the screen. Any suggestions on what might be causing this issue?
$scope.keyLayout = [
{label: '`'},
{label: '1'},
{label: '2'},
{label: '3'},
{label: '4'},
{label: '5'},
{label: '6'},
{label: '7'},
{label: '8'},
{label: '9'},
{label: '0'},
{label: '-'},
{label: '='},
{label: 'q'},
{label: 'w'},
{label: 'e'},
{label: 'r'},
{label: 't'},
{label: 'y'},
{label: 'u'},
{label: 'i'},
{label: 'o'},
{label: 'p'},
{label: '['},
{label: ']'},
{label: '\x5c'},
{label: 'a'},
{label: 's'},
{label: 'd'},
{label: 'f'},
{label: 'g'},
{label: 'h'},
{label: 'j'},
{label: 'k'},
{label: 'l'},
{label: ';'},
{label: '\x27'},
{label: 'z'},
{label: 'x'},
{label: 'c'},
{label: 'v'},
{label: 'b'},
{label: 'n'},
{label: 'm'},
{label: ','},
{label: '.'},
{label: '/'}
];
$scope.keyLayoutShift = [
{label: '~'},
{label: '!'},
{label: '@'},
{label: '#'},
{label: '$'},
{label: '%'},
{label: '^'},
{label: '&'},
{label: '*'},
{label: '('},
{label: ')'},
{label: '_'},
{label: '+'},
// Remaining key values omitted for brevity
];
$scope.shiftDown = function(ev) {
if (ev.which==16)
return "keyLayoutShift";
else
return "keyLayout";
}
app.directive("keyboard", function(shiftDown){
if (shiftDown == "keyLayout") {
return {
restrict: "E",
template: "<ul id='keyboard'>" +
"<li class='letter' ng-repeat='key in keyLayout'></li>" +
"</ul>"
};
}
})