AngularJS 通过 ui.router 中的 $stateProvider 更改特定视图

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（以及因此类别的侧导航）不会在您每次单击侧导航中的类别链接时重新加载。

我希望这会有所帮助！