我试图在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>"
};
}
})
答案 0 :(得分:0)
执行此操作的方法是在指令的范围内收集键盘指令的所有必需元素,并仅使用scope
选项公开指令的元素,例如使用不同范围表示法的事件,变量和其他信息:&
,@
,=
请参阅angularjs directives。接下来是使用element参数在link
选项中设置这些事件,并使用指令控制器设置初始keyLayout。注意:use scope.$apply()
更新当前选定的keyLayout。
将此Plunker视为演示