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

我正在用AngularJS和express.js编写一个完整的电子商务商店，我正在寻找一个对$stateProvider和ngAnimate更有经验的人

目前我在$stateProvider和两列布局方面遇到了问题

我有根视图抽象状态，名为“pages”。此状态包括名为“main”的视图的基本应用程序模板。在状态更改事件中，“main”视图通过ngAnimate模块的CSS转换转换到下一个视图，而常规的一栏页面也可以

我遇到的问题是在“主”视图中包含的两列布局中。使用双栏视图的部分模板，ngAnimate正在转换整个内容，所以栏不需要使用products视图进行转换

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

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

现在，产品列表正在正确更改，并将转换附加到“内容”视图，但不需要重新加载列“侧栏”

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

---

现场演示：

代码：

---

上面描述的模块是页面和产品。

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

.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

应该只包含一个

。结果是，抽象父状态

pages.products.category

（因此该类别的侧导航）不会在每次单击侧导航中的类别链接时重新加载

---

我希望这有帮助

工作完美！谢谢