5

AngularJSでルーティングを行うSPAを作成した場合、戻るボタンを押すと1つ前のページに戻りますが、 ページ自体は再度リロードされます。

そのため、前のページの表示位置に戻らず、またデータのリロードが発生してしいます。

AngularJSで戻るボタンを押した場合に、SPAではない通常のアプリケーションと同様に、 前のページをリロードせずに、元のスクロール位置に戻るにはどのようにすればよろしいでしょうか?

4
  • ルーティングはどう設定していますか? ルーティングの公式チュートリアルアプリでは、詳細ビューを開いてから戻るボタンを押すと、ページ自体はリロードされず、元のスクロール位置でリストに戻ります。
    – ento
    2014年11月28日 1:45
  • ルーティングは標準のngRouteを使っています。上記サイトを見てみましたが、Chromeでは確かにスクロール位置が保持れますが、Safari/Firefoxではスクロール位置が先頭に戻ってしまいますね。。。(いずれもMac OS X) 2014年11月28日 5:46
  • 確かに戻ってしまいますね。リロードの問題は上のアプリでは再現しますか? ドキュメントの再読み込みではなく、 $http.get が再実行されるという意味での「データのリロード問題」でしょうか
    – ento
    2014年11月28日 7:07
  • はい。$http.getが再実行される、という意味でのリロードです。本当のリロードは発生していません。 2014年12月1日 4:57

1 件の回答 1

2

scroll位置についてはscrollイベントで位置を記録しておいて戻ったタイミングで復元する方法があります。以下の回答が参考になります。

https://stackoverflow.com/questions/14107531/retain-scroll-position-on-route-change-in-angularjs#16198496

$http.getが再度実行される件はcacheを有効にすれば解決すると思われます。

$http.get('phones/phones.json', { cache: true })
1
  • ありがとうございます。cacheオプションで大丈夫そうですね。ただ、元のページが、Twitterのように追加読み込みする場合やその他操作を行った後遷移をする場合、状態を覚えておかないといけないですね。 2014年12月2日 3:16

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。