4

私は、API を呼び出して大量のデータを返す AngularJS アプリを使用しており、ユーザーはそのデータをタグでフィルタリングして、結果の粒度を高めることができます。タグをクリックしてデータをフィルタリングするたびに、アプリが新しい$http.get()呼び出しを行い、ユーザーがパーマリンクを保存して特定のデータ セットに戻ることができるように、URL が適切なクエリ パラメーターで変更されます。

を使用してアプリに適切な履歴処理を与え、window.history.pushState()各履歴オブジェクトに関連するクエリ パラメーターを状態データとして渡すようにしています。window.onpopstate戻る/進むボタンがクリックされたことを検出するために使用し、それを使用して、履歴から関連する状態データを使用して新しい呼び出し$http.get()を行います。

何らかの理由で、この関数は 1$http.get()ごとにのみ起動し、その後 2 つの呼び出しを行います。キャッシングが行われているようですが、原因を見つけることができませんでした。この動作は、後方と前方の両方向に持続し、一貫して毎秒のイベントです。タグが追加/削除されるたびに が 1 だけ増加すること、状態データが正常に送信されていること、新しい検索クエリが正しく組み立てられていること、および要求パスが正しいことを確認しました。発砲していないだけです。どうしたの?? popstatewindow.history.length

説明のために、動作フローは次のようになります。

  • ページを読み込む/default
    • 最初のタグを追加: URL は/default&tags=aで、$http.get()新しいデータを返します
    • 2 番目のタグを追加: URL is /default&tags=a,b$http.get()新しいデータを返す
    • 3 番目のタグを追加: URL is /default&tags=a,b,c$http.get()新しいデータを返す
    • 4 番目のタグを追加: URL is /default&tags=a,b,c,d$http.get()新しいデータを返す
  • 最初の戻るボタン イベント
    • window.onpopstate火災、URLは現在/default&tags=a,b,c
    • ネットワークの変更なし
  • 2 回目の戻るボタン イベント
    • window.onpopstate火災、URLは現在/default&tags=a,b
    • $http.get()起動し、データのネットワーク要求を送信します/default&tags=a,b,c
    • $http.get()再び起動し、データのネットワーク要求を送信します/default&tags=a,b
    • /default&tags=a,b負荷のデータセット
  • 3 回目の戻るボタン イベント
    • window.onpopstate火災、URLは現在/default&tags=a
    • ネットワークの変更なし
  • 4 回目の戻るボタン イベント
    • window.onpopstate火災、URLは現在/default
    • $http.get()起動し、データのネットワーク要求を送信します/default&tags=a
    • $http.get()再び起動し、データのネットワーク要求を送信します/default
    • /default負荷のデータセット

関連するコード スニペット:

$scope.apiRequest = function(options, callback) {

    // Omitted: a bunch of functions to build query
    // based on user-selected tags.
    // I've verified that this is working correctly.

    $http.get(path)
      .then(function(response) {
        console.log('http request submitted');
        if (callback) {
          callback(response.data.response, response.data.count, response.data.facets);
          console.log('data returned');
        }
      }, function(response) {
          console.log('there has been an error');
     });
}

成功イベントもエラー イベントも発生しません。$http.get().then().catch()他に何か起こっている可能性があるかどうかを確認するために使用しようとしましたが、何らかの理由...catch()で、それは有効な関数ではないというエラーがコンソールに表示され続け、それ自体が当惑しています。何か案は?

ありがとう!

4

1 に答える 1

2

$digestこれは、関数がループを循環していないことを示しているように思えます。この場合、ハンドラー関数$scope.$apply();の最後の行として追加して、関数呼び出しを実行するサイクルを開始することができます。window.onpopstate$digest

この記事、AngularJS Scope Life-Cycle に関する注意事項は、サイクルと、サイクルを強制的に実行する$digest方法をよりよく理解するのに役立ちました。非同期コールバック。$digest$scope.$apply();$scope.$apply()

于 2015-08-28T19:46:54.170 に答える