Question

BaseUrl：/en/products/

我有：状态网址： /en/products/doors?color=red&type=shaped

此状态包含要销售的商品列表。由params过滤。

当我点击一个项目（名称：Red Beech Door，friendlyUrl：red-beech-door）时，我想要打开项目详细信息的模态，并将URL更改为：

/en/products/doors/red-beech-door

我的代码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>

我需要实现的目标：

使用此网址列出的项目显示模式：/en/products/doors/red-beech-door
当你关闭模态时，列表仍然处于原始的未更改状态，并且url更改为状态/en/products/doors?color=red&type=shaped之前
当用户点击浏览器的后退按钮时，模态关闭，网址更改为之前的状态/en/products/doors?color=red&type=shaped

我尝试用$ routeProvider制作它，但后来我尝试了$ stateProvider。也许它可以通过$ routeProvider来实现。请帮忙。

如果你提供plunker或jsfiddle，你会度过我的一天。

Answer 1

您可以尝试这种方法：

https://lingohub.com/blog/2015/06/bootstrap-modal-window-custom-url-angularjs/

它使用$ stateManager顶部的包装器来方便模态状态的注册，并处理处理模态的麻烦。请注意，它基于UI Bootstrap模式。

项目列表中的角度嵌套模态

1 个答案: