AngularJS和UI-路由器多級麪包屑元素

我正在使用AngularJS和UI-Router製作一個小電子商務產品庫。它應該顯示錶示產品類別的圖像網格。當用戶選擇一個類別時，網格應顯示該類別的子類別，等等，直到用戶達到只有產品的級別。點擊產品應顯示其詳細信息。我在UI-Router中使用2個狀態，一個用於畫廊，另一個用於細節。AngularJS和UI-路由器多級麪包屑元素

app.config(function($stateProvider){ 

    $stateProvider 
     // Gallery State 
     .state('gallery', { 
      url: '/products/:category', 
      templateUrl: 'views/gallery.html', 
      controller: 'galleryCtrl' 
     }) 
     // Details State 
     .state('details', { 
      url: '/details/:id', 
      templateUrl: 'views/details.html', 
      controller: 'detailsCtrl' 
     }); 
});

在「庫」狀態時，控制器使用：類參數從數據庫中該類別的所有子類別或產品在網格中顯示得到。 'details'狀態的控制器使用模擬策略通過：id參數獲取產品信息。現在我想製作一個顯示用戶通過圖庫的「路徑」的麪包屑元素。例如，如果用戶選擇「計算機」類別，然後在「筆記本電腦」類別，然後在「富筆記本」，麪包屑應顯示：

Computers > Notebooks > Foo Notebook

我發現的解決方案，從UI獲得國家層次-Router創建麪包屑。問題是，只有我創建的兩個州，麪包屑不會顯示所有類別，只是最後一個選定的類別。我不想爲每個類別創建一個狀態，因爲類別的數量和層次結構可能會發生變化。有什麼辦法可以做到這一點？

來源

2014-09-19 faeru

這是一個單頁面應用程序嗎？或者每個狀態更改之間是否有頁面重新加載？ – Daniel 2014-09-19 14:33:34

單頁，實際上這些狀態是另一個的孩子。我編輯了代碼以避免問題變得太大。 – faeru 2014-09-19 14:42:04

如果您真的對記錄用戶到達某處的方式感興趣：一種方法是創建一個service並將每個狀態更改推送到服務中的數據存儲並在$cookieStore中複製 - 你可以使用這個狀態改變事件。

但是，一般來說，無論我過去做過麪包屑/層次結構，都有確定的方法可以到達某個位置。你的例子說明了那個;一個特定的筆記本是在一個一般的列表類別下面，而這個類別又是在父類別下。所以你可以推斷所有的父母，當你到達一個給定的項目頁面。不確定哪種解決方案最符合您的需求。

來源

2014-09-19 15:47:40 Daniel

我想讓產品能夠屬於多個類別，所以我想沒有明確的方法來獲得產品。這將是它所屬的每個類別的一條路徑。 – faeru 2014-09-19 16:56:42

AngularJS和UI-路由器多級麪包屑元素

回答

相關問題