2013-10-21 31 views
5

在單頁面應用程序中,是否有方法來回切換AngularJS路線並將其顯示回與之前顯示的狀態相同的狀態?AngularJS:記住狀態/設置複雜視圖與路線

通常這將通過綁定父範圍中的數據來實現。雖然這很容易設置爲輕量級視圖,但對於包含大量圖形元素的視圖來說,這樣做可能會很麻煩。

下面是一個例子,在具有以前的路由狀態記憶可以增強用戶體驗:下頁,想象你站在第1項

  • 和選擇選項卡2
  • 然後移動到項目2
  • 最後切換回第1項:標籤2不再被選擇:-(

http://angular-route-segment.com/src/example/#/section1/1

在路線之間來回切換時,視圖似乎被破壞/構建。

的溶液。將有關存儲在父範圍的用戶界面的狀態,但它具有以下缺陷:

  • 創建對象存儲用戶界面
  • 創建複雜的所有的小細節關於在相同的狀態-saving和 - 復位UI爲存儲在數據模型中的UI狀態之前
  • 邏輯聽起來不那MVC肥胖型

使用顯示/隱藏存儲視圖的div保存狀態,但不使用路由,交換業務必須手工完成。我喜歡使用路由,因爲1.瀏覽器歷史導航(哈希在url中)和2.它很容易設置。

讓用戶不記得用戶界面狀態就像讓Chrome在頁面之間來回切換時重新加載頁面一樣:用戶界面不太友好。

有沒有一種方式?

回答

1

您的$ routeSegment方法非常有趣。在$ routeSegment服務可以插入到$ routeChangeStart事件以

  • 勉強保持在迄今所看到的所有路徑「子路徑歷史」,也許只有那些明確配置,以保持自己的UI狀態。在路徑「/ section1/1」的示例中,如果選擇了選項卡2,存儲的子路徑將爲「/ Y」。事情變得有趣,同樣可能需要覆蓋使用$ routeParams的動態路徑。
  • 通過在事件處理程序中使用$ location.path來使用此歷史記錄進行重定向。因此,next.originalPath爲「/ section1/1」的$ routeChangeStart事件可能會被重定向到「/ section/1/Y」