如何在keydown事件中更改AngularJS中的模型

时间:2014-04-09 23:29:58

标签: javascript angularjs keydown

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

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

1 个答案:

答案 0 :(得分:0)

执行此操作的方法是在指令的范围内收集键盘指令的所有必需元素,并仅使用scope选项公开指令的元素,例如使用不同范围表示法的事件,变量和其他信息:&@=请参阅angularjs directives。接下来是使用element参数在link选项中设置这些事件,并使用指令控制器设置初始keyLayout。注意:use scope.$apply()更新当前选定的keyLayout。

将此Plunker视为演示