3

私は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
];
}

オンスクリーン キーボードで入力すると、フィルタは応答しませんが、実際のキーボードで入力すると更新され、それに応じてデータがフィルタリングされます。なんで？

助けてくれてありがとう！

4

1 に答える 1

1

簡単な回答:
Angular はここで $scope の変更を認識していないと思います (画面上のキーボードをクリックしたとき)。

どうしてこれなの？
免責事項: 私も AngularJS は初めてです。そのため、私の説明はいくつかの点で間違っている可能性があります。しかし、最初の分析では、jkeyboard.js がコンテンツを直接操作しているように見えることがわかりました。これは、キーダウン イベントまたはキープレスをそれぞれ発生させないため、実際のキーボードを模倣しません。angular-ui の typehead ディレクティブも調べました。ここでは、少なくともいくつかのキーダウン イベントをリッスンします (完全ではありませんが)。

//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を参照)

この問題だけでも、互換性の問題が確実に発生します。

それについて何ができますか？
適切なイベントが発生するように、および/または適切なタイミングで $scope.$apply() が呼び出されるように、jkeyboard.js にパッチを適用するディレクティブを自分で作成することもできます。

何とかお役に立てれば幸いです！

于 2014-08-04T16:22:58.880 に答える