Question

我正在使用AngularJS和express.js编写完整的堆栈电子商务商店，我正在寻找更有经验的$ stateProvider和ngAnimate的帮助。

目前我遇到了$ stateProvider和两列布局的问题。

我有根视图抽象状态，名为'pages'。此状态包括基本应用程序模板，其视图名为“main”。在状态更改事件中，“主”视图正在通过ngAnimate模块转换到下一个具有CSS转换的视图，并且对于常规的一个列页面都可以正常。

我遇到的麻烦在“主要”视图中包含的两栏布局中。使用两列视图的部分模板，ngAnimate正在转换整个内容，因此无需使用产品视图转换列。

我做了什么，我创建了一个子状态并将其模板分成两个视图。现在，“侧边栏”视图包含部分产品类别，第二个视图“内容”是产品列表。

产品列表视图内容取决于产品状态的子状态，基于上面描述的抽象状态。

现在，产品列表正在正确更改，并且转换已附加到“内容”视图，但不会重新加载“侧边栏”列。

是否可以通过仅更改特定视图的内容来更改状态，或者您是否有其他想法？

现场演示：http://rtbm.space:3000/#/products

代码：https://github.com/rtbm/angular-express-store/tree/master/public/assets/src/web/modules

上述模块是页面和产品。

Answer 1

您可以使用更分层的路径结构：

.state('pages.products.category', {
    abstract: true,
    url: '/category',
    templateUrl: 'assets/dist/web/modules/products/partials/products.category.html',
    controller: 'ProductsCategoryController',
    controllerAs: 'productsCategoryCtrl',
    resolve: {
        CategoriesData: function(CategoriesService) {
            return CategoriesService.query();
        }
    }
})
.state('pages.products.category.content', {
    url: '/:categoryId',
    templateUrl: 'assets/dist/web/modules/products/partials/products.list.html',
    controller: 'ProductsListController',
    controllerAs: 'productsListCtrl',
    resolve: {
        ProductsData: function($stateParams, ProductsService) {
            return ProductsService.query({
                categoryId: $stateParams.categoryId
            });
        }
    }
})

现在products.category.html应该只包含一个<ui-view>。结果是，每次单击侧面导航中的类别链接时，都不会重新加载抽象父状态pages.products.category（因此类别的侧面导航）。

我希望这有帮助！

AngularJS通过$ stateProvider从ui.router

1 个答案: