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-路由器多级面包屑元素

回答

相关问题