AngularJS和UI-Router多级面包屑元素

时间:2014-09-19 14:05:57

标签: angularjs breadcrumbs angular-ui-router

我正在使用AngularJS和UI-Router制作一个小型的电子商务产品库。它应该显示代表产品类别的图像网格。当用户选择类别时,网格应显示该类别的子类别,依此类推,直到用户达到只有产品的级别。单击产品应显示其详细信息。我在UI-Router中使用2个状态,一个用于库,一个用于细节。

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

在“图库”状态下,控制器使用:category参数从数据库中获取要在网格中显示的所有子类别或该类别的产品。 'details'状态的控制器使用模拟策略通过:id参数获取产品信息。 现在我想制作一个breadcrumb元素,显示用户通过库的“路径”。例如,如果用户选择“计算机”类别,然后选择“笔记本”类别,然后选择“Foo Notebook”,则应显示面包屑:

Computers > Notebooks > Foo Notebook

我找到了从UI-Router获取状态层次结构的解决方案来创建面包屑。问题是,只有我创建的2个状态,面包屑不会显示所有类别,只显示最后选择的类别。我不想为每个类别创建一个状态,因为类别的数量和层次结构可能会发生变化。有没有办法实现这个目标?

1 个答案:

答案 0 :(得分:1)

如果您真的对记录用户到达某处的方式感兴趣:一种方法是创建service并将每个状态更改推送到服务中的数据存储并进行复制在$cookieStore中 - 您可以使用状态更改事件。

但是,一般来说,每当我过去做过面包屑/层次结构时,都有一种明确的方式来到某个位置。你的例子说明了;特定笔记本属于一般列表类别,而该类别又属于父类别。因此,当您到达给定项目页面时,您可以推断所有父母。不确定哪种解决方案最符合您的需求。