3

私は現在、Win8.1 WinJS アプリを開発する際にいくつかのフレームワークの使いやすさをテストするためのプロトタイプに取り組んでいます。開発中に、フォームに関する非常に奇妙な動作を発見しました。

これは、新しく作成された WinJS アプリのバニラ フォームです。

ここに画像の説明を入力

表示されているのは、入力ボックス内のカーソルとコピー ボタンの半分です。ドロップイン仮想キーボードは入力ボックスをオーバーレイするため、コンテンツを自動的に上にスクロールします。

ここで、AngularJS 1.3.1 を含めます。

ここに画像の説明を入力

現在、カーソルはなく、コピー ボタンは表示されず、ドロップイン キーボードは実際には入力ボックスに重なっています。実際には、非表示カーソルの位置を変更することはできないため、既存のテキストの前に文字を追加することしかできません。

両方のバージョンの DOM ツリーを分析しました。

バニラ:

ここに画像の説明を入力

Angular 1.3.1 が含まれています:

ここに画像の説明を入力

私たちが見ることができるのは、いくつかの奇妙なお尻の css 定義を含む head 内に angular が第 2 レベルの head をネストしていることです。さらに、head 要素内に別の body タグが作成されます。次のスニペットを使用して、角度をロードした後にそれらを削除しようとしました:

<script type="text/javascript">
  $(function () {
    $('head > head, head > body').remove();
  });
</script>

これで問題は解決しましたが、ng-show、ng-hide ディレクティブが機能しなくなりました。この問題は、WinJS API で AngularJS を使用している場合にのみ確認できます。インターネットを検索しましたが、その動作に関する手がかりは見つかりませんでした。実際には、WinJS アプリケーション内で AngularJS を使用するプロセスについて説明しているブログがいくつかありますが、そのような問題については触れていません。

ここで何が起こっているのか分かりますか?

4

1 に答える 1