3

我正在处理一个页面，该页面应该有一个输入字段和一个屏幕键盘，用 js 实现。我用这个键盘：http: //jabtunes.com/notation/keyboardcanvasexamples.html

输入字段得到输入就好了，问题是依赖于这个输入字段的角度过滤器不起作用。我在这个 plunker 中发现了一个类似的问题，但没有解决方案： 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
];
}

使用屏幕键盘键入时，没有过滤器响应，但使用真实键盘键入时，它们会更新并相应地过滤数据。为什么？

谢谢你的帮助！

4

1 回答 1

1

简短回答：
我认为 Angular 不知道此处有任何 $scope 更改（单击屏幕键盘时）。

为什么是这样？
免责声明：我也是 AngularJS 的新手。所以我的解释在某些方面可能是错误的。然而，第一次分析向我表明，您的 jkeyboard.js 似乎直接操纵了内容。它不会模拟真实的键盘，因为它不会分别触发 keydown 事件或 keypress。我还查看了 angular-ui 的 typeahead 指令。在这里，他们至少会监听一些 keydown 事件（虽然不完全）：

//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() 的方式。

希望我能以某种方式提供帮助！

于 2014-08-04T16:22:58.880 回答