2014-04-09 40 views
0

我试图在AngularJS应用程序中推出keybaord布局。我需要它,这样当我按下Shift键时,屏幕上显示的字母将变为键盘上相应的字母。我在我的控制器中创建了一个函数来响应shift keydown事件,并将其传递给基于keydown函数返回的不同模型的指令,但没有任何显示。我做错了什么想法?如何在keydown事件中更改AngularJS中的模型

$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: '+'}, 
     {label: 'Q'}, 
     {label: 'W'}, 
     {label: 'E'}, 
     {label: 'R'}, 
     {label: 'T'}, 
     {label: 'Y'}, 
     {label: 'U'}, 
     {label: 'I'}, 
     {label: 'O'}, 
     {label: 'P'}, 
     {label: '{'}, 
     {label: '{'}, 
     {label: '|'}, 
     {label: 'A'}, 
     {label: 'S'}, 
     {label: 'D'}, 
     {label: 'F'}, 
     {label: 'G'}, 
     {label: 'H'}, 
     {label: 'J'}, 
     {label: 'K'}, 
     {label: 'L'}, 
     {label: ':'}, 
     {label: '\x22'}, 
     {label: 'Z'}, 
     {label: 'X'}, 
     {label: 'C'}, 
     {label: 'V'}, 
     {label: 'B'}, 
     {label: 'N'}, 
     {label: 'M'}, 
     {label: '<'}, 
     {label: '>'}, 
     {label: '?'} 

    ]; 

    $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>" 
      }; 
     } 
    }) 

回答

0

的一种方式做,这是收集所有键盘指令所需元素的指令的范围内,只有通过使用scope选项例如暴露你的指令的要素事件,变量和其他信息:&,@,=请参阅angularjs directives。接下来是通过使用element参数在link选项中设置这些事件,并使用指令控制器设置初始keyLayout。注意:use scope.$apply()更新当前选定的keyLayout。

看到这个Plunker作为DEMO

相关问题