0

jQueryMobile を使用してモバイル Web アプリを作成しており、AngularJS を使用してデータ バインディングを処理しています。しかし、これにより、モバイル デバイスでルーティングの問題が発生します。以下は、問題を再現するために記述できる最小限のコードです。デスクトップのChromeではすべて正常に動作しますが、Androidデバイスから同じページを試すと、厄介な「ページの読み込み中にエラーが発生しました」というメッセージが表示されます。ナビゲーションに data-url を使用することで問題を解決できますが、落とし穴があります。また、電話ギャップでパッケージ化する必要があります。これは、html が file:// によって読み込まれ、直接のナビゲーション (data-url) が機能しないことを意味します (私は試しました)。

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>

        <script src="https://raw.github.com/tigbro/jquery-mobile-angular-adapter/master/compiled/jquery-mobile-angular-adapter-1.2.0.js"></script>        
    </head>

    <body>
        <div data-role="page" id="main">
            <a data-role="button" href="#sub">sub</a>
        </div>

        <div data-role="page" id="sub">
            <p>sub page</p>
        </div>
    </body>

</html>

「サブ」ボタンをクリックすると、ユーザーはホスト名/#sub にリダイレクトされ、Chrome 上にありますが、Android では奇妙なことが起こり、ブラウザはホスト名/#!/%23sub にルーティングされます。これは URL エンコードされていると思いますか?

また、Angular と JQM-angular アダプターの 2 つのスクリプト参照を削除するだけで、すべてが機能することも指摘しておく必要があります (もちろん、データバインディングはありません)。

4

1 に答える 1

1

angular-jquery アダプターを削除しようとしましたが、すべてが魔法のように機能します。angular と jquery の衝突の問題もありません。

于 2013-01-17T14:28:17.197 に答える