2014-04-09 41 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

相關問題