Angular не получает ввод javascript с экранной клавиатуры

я работаю над страницей, которая должна иметь поле ввода и экранную клавиатуру, реализованную в js. Я использовал эту клавиатуру: http://jabtunes.com/notation/keyboardcanvasexamples.html

Поле ввода получает ввод просто отлично, проблема в том, что угловые фильтры, зависящие от этого поля ввода, не работают. Есть аналогичная проблема, описанная в этом плункере без решения: 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
];
}

При вводе с экранной клавиатуры никакие фильтры не реагируют, но при вводе с реальной клавиатуры они обновляются, и данные фильтруются соответствующим образом. Почему?

Спасибо за вашу помощь!


person Zahnstochermann    schedule 04.08.2014    source источник
comment
Как отметил @user3651406, проблема в том, что jKeyboard.js не имитирует реальные события клавиатуры. Вам нужно изменить jKeyboard самостоятельно, по крайней мере, чтобы вызвать событие «вход». Или найдите другую более надежную библиотеку.   -  person runTarm    schedule 04.08.2014


Ответы (1)


Короткий ответ:
Я думаю, что Angular не знает о каких-либо изменениях $scope здесь (при нажатии на экранную клавиатуру).

Почему это?
Отказ от ответственности: я тоже новичок в AngularJS. Так что мое объяснение может быть неправильным в некоторых моментах. Однако первый анализ показал мне, что ваш jkeyboard.js, похоже, напрямую манипулирует содержимым. Он не имитирует настоящую клавиатуру, потому что он не запускает событие нажатия клавиши или нажатие клавиши соответственно. Я также взглянул на директиву typeahead angular-ui. Здесь они, по крайней мере, прослушивают некоторые события нажатия клавиш (хотя и не полностью):

//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() вызывается в нужный момент.

Надеюсь, я смог как-то помочь!

person NicBright    schedule 04.08.2014
comment
Я не думаю, что $scope.$apply() поможет. Но да, вы правы, ключ к этой проблеме в том, что jKeyboard не имитирует настоящую клавиатуру, то есть не запускает никаких событий. - person runTarm; 04.08.2014
comment
Хорошо, спасибо за предложения! Как вы, ребята, думаете, есть какой-то простой способ изменить js-клавиатуру таким образом, чтобы она имитировала настоящую клавиатуру, например, запускать события нажатия клавиш и т. д.? - person Zahnstochermann; 08.08.2014