Question

我正在使用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个状态，面包屑不会显示所有类别，只显示最后选择的类别。我不想为每个类别创建一个状态，因为类别的数量和层次结构可能会发生变化。有没有办法实现这个目标？

Answer 1

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

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

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

1 个答案: