Я использую 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-мя состоявшимися мной ящиками не будет отображаться все категории, только последний выбранный. Я не хочу создавать состояние для каждой категории, потому что число и иерархия категорий могут измениться. Есть ли способ сделать это?
Это одностраничное приложение? Или есть перезагрузка страницы между каждым изменением состояния? – Daniel
Одиночная страница, на самом деле эти состояния - дети другого. Я отредактировал код, чтобы избежать слишком большого вопроса. – faeru