2014-09-19 4 views
1

Я использую AngularJS и UI-Router, чтобы сделать небольшую галерею продуктов для электронной коммерции. Он должен отображать сетку изображений, представляющих категории продуктов. Когда пользователь выбирает категорию, сетка должна отображать дочерние категории этого и так далее, пока пользователь не достигнет уровня, где есть только продукты. Нажатие на продукт должно отображать его данные. Im использует 2 состояния в UI-Router, один для галереи и один для деталей.Элемент многоуровневой панировки AngularJS и UI-Router

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' 
     }); 
}); 

В состоянии «галереи», контроллер использует: параметр категории, чтобы получить из базы данных всех подкатегорий или продуктов этой категории для отображения в сетке. Контроллер состояния детализирует аналоговую стратегию, чтобы получить информацию о продукте с параметром: id. Теперь я хочу создать элемент breadcrumb, который показывает «путь», который пользователь просматривал в галерее. Например, если пользователь выбирает категорию «Компьютеры», а затем в категории «Ноутбуки», а затем «Foo Notebook», то крошка должна показывать:

Computers > Notebooks > Foo Notebook 

я нашел решение, которые получают государственную иерархию из UI -Руйте, чтобы создать панировочную сухарь. Проблема в том, что только с 2-мя состоявшимися мной ящиками не будет отображаться все категории, только последний выбранный. Я не хочу создавать состояние для каждой категории, потому что число и иерархия категорий могут измениться. Есть ли способ сделать это?

+0

Это одностраничное приложение? Или есть перезагрузка страницы между каждым изменением состояния? – Daniel

+0

Одиночная страница, на самом деле эти состояния - дети другого. Я отредактировал код, чтобы избежать слишком большого вопроса. – faeru

ответ

1

Если вы действительно заинтересованы в том, чтобы документировать способ получения пользователем: один способ сделать это - создать service и нажать каждое изменение состояния в хранилище данных в службе и воспроизвести в $cookieStore - вы можете использовать для этого события изменения состояния.

Как правило, всякий раз, когда я делал панихиды/иерархии в прошлом, существует определенный способ добраться до места. Ваш пример иллюстрирует это; конкретный ноутбук находится под общей категорией списка, которая, в свою очередь, относится к родительской категории. Таким образом, вы можете вывести всех родителей, когда попадаете на заданную страницу. Не уверен, какое решение лучше всего соответствует вашим потребностям.

+0

Я хочу, чтобы продукты могли принадлежать более чем одной категории, поэтому я думаю, что нет окончательного способа добраться до продукта. Это будет один путь для каждой категории, к которой он принадлежит. – faeru