Javascript 项目列表上的角度嵌套模式

BaseUrl:/en/products/

我有：国家网址： /en/产品/门？颜色=红色，类型=成型

此状态包含要销售的项目列表。按参数过滤

当我单击一个项目名称：Red Beech Door，friendlyUrl:Red Beech Door时，我希望打开带有项目详细信息的modal，url更改如下：

/en/产品/门/红山毛榉门

我的代码app.js：

angular.module('app').config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $urlRouterProvider.otherwise("/");
    $stateProvider
        .state('general', {
            url: "/",
            controller: 'productsGeneralController',
            templateUrl: '/static/templates/classic.html',
        })
        .state('filter', {
            url: "/:category",
            reloadOnSearch: true,
            controller: 'productsFilterController',
            templateUrl: '/static/templates/filter.html',
        })
        .state('filter.concrete', {
            url: "/:product",
            onEnter: ['$stateParams', '$state', '$uibModal', function ($stateParams, $state, $uibModal) {
                $uibModal.open({
                    templateUrl: "static/templates/pr.html",
                    controller: 'modalProductController',
                });
            }],
        })
});

filter.html中的我的代码：

<a ng-href="/{{currentCategory}}/{{item.friendlyUrl}}">
...
</a>

我需要达到的目标是：

在此url中列出的项目上显示模式：/en/products/doors/red beech door 当您关闭modal时，列表仍将处于其原始不变状态，url将更改为before state/en/products/doors？color=red&type=shaped 此外，当用户单击浏览器的“后退”按钮时，模式关闭，url变为其前状态/en/products/doors？color=red&type=shaped 我尝试使用$routeProvider，但后来我尝试了$stateProvider。 也许可以通过$routeProvider实现。请帮忙

---

如果您提供plunker或JSFIDLE，您将成为我的一天。

您可以尝试以下方法：

它在$stateManager上使用包装器来方便模式状态的注册，并处理处理模式状态的麻烦。 注意，它基于UI引导模式