我正在处理一个页面，该页面应具有一个输入字段和一个屏幕键盘，以js实现。我使用了这个键盘:http://jabtunes.com/notation/keyboardcanvasexamples.html
输入字段可以很好地获得输入，问题是依赖于此输入字段的 Angular 滤波器不起作用。我发现在这个问题中没有解决任何类似的问题:
http://plnkr.co/edit/FnrZTAwisYub5Vukaw2l?p=preview
的HTML:
<html ng-app="plunker">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<script src="jKeyboard.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class='container-fluid' ng-controller="TypeaheadCtrl">
<pre>Model: {{selected| json}}</pre>
<input type="text" ng-model="selected" id="testInput" typeahead="state.name for state in states | filter:$viewValue | limitTo:8">
</div>
<button id="btn">E</button>
</body>
</html>
js:
angular.module('plunker', ['ui.bootstrap']);
function TypeaheadCtrl($scope) {
$scope.selected = undefined;
$scope.WatchPrintList = function () {
$scope.selected= {};
$scope.$watch('#testInput', function(newVal, oldVal) {
$scope.selected = newVal;
}, true);
}
$scope.states = [
{"name":"Alabama","alpha-2":"AL"},
{"name":"Alaska","alpha-2":"AK"},
//etc etc
];
}
使用屏幕键盘键入时，没有过滤器响应，但是使用真实键盘键入时，它们会更新，并相应地过滤数据。为什么？
谢谢您的帮助!
最佳答案
简短答案:
我认为Angular在这里没有任何$ scope更改(单击屏幕键盘时)。
这是为什么？
免责声明:我也是AngularJS的新手。因此，我的解释在某些方面可能是错误的。
但是，初步分析显示，您的jkeyboard.js似乎可以直接操纵内容。它不会模仿真实的键盘，因为它不会分别触发按键事件或按键。
我也看过了angular-ui的typeahead指令。在这里，他们至少会监听一些按键事件(尽管不是全部):
//bind keyboard events: arrows up(38) / down(40), enter(13) and tab(9), esc(27)
(请参阅https://github.com/angular-ui/bootstrap/blob/master/src/typeahead/typeahead.js#L268)
仅此问题肯定会引起兼容性问题。
您能做什么？
可能自己编写一条指令，该指令负责修补jkeyboard.js，以便触发适当的事件和/或在适当的时候调用$ scope。$ apply()。
希望我能有所帮助!