Question

我使用angularjs-ui router模块来管理我的状态。

我有这个结构：

$stateProvider.state('menu', {
        templateUrl: '/templates/menu/wrap.html',
        params: {
            slug: {
                value: ''
            },
            id: {
                value: null
            }
        },
        ncyBreadcrumb: {
            label: 'Menu'
        }

    }).state('menu.list', {
        url: '/:slug',
        parent: 'menu',
        params: {
            slug: {
                value: ''
            },
            id: {
                value: null
            },
            Name: {
                value: '{{Name}}'
            },
            Type: {
                value: null
            }
        },

        views: {
            // the main template will be placed here (relatively named)
            '': {
                templateUrl: '/templates/menu/main.html',
                controller: 'MenuMainCtrl as MNC'
            },

            // for column two, we'll define a separate controller
            'productList@menu.list': {
                templateUrl: '/templates/menu/productlist.html',
                controller: 'ProductListCtrl as PLC'
            },
            // for column two, we'll define a separate controller
            'navigation@menu.list': {
                templateUrl: '/templates/menu/navigation.html',
                controller: 'MenuNavigationCtrl as MN'
            },
            // for column two, we'll define a separate controller
            'cart@menu.list': {
                templateUrl: '/templates/menu/cart.html',
                controller: 'CartCtrl as CC'
            }
        },
        ncyBreadcrumb: {
            label: '{{Name}}'
        }
    }).state('menu.detail', {
            parent: 'menu.list',
            url: '/:productSlug',
            params: {
                productID: {
                    value: ""
                },
                productSlug: {
                    value: ""
                },
                productName: {
                    value: ""
                },
                Name: {
                    value: "Breakfast"
                },
                Type: {
                    value: null
                },
                MenuListItemID: {
                    value: null
                }

            },
            views: {
                '@': {
                    templateUrl: '/templates/menu/productSingle.html',
                    controller: 'ProductSingleCtrl as PSC'
                }
            },

            ncyBreadcrumb: {
                label: '{{productName}}'
            }

        });

查看名为“menu.detail”的最后一个州。这个的基本URL是“/ menu /”，当这个状态处于活动状态时，我的URL就是例如。 “localhost：8081 /菜单/早餐 - 三明治/ farmtotable-breakfast-sandwich”但我的客户想成为“localhost：8081 / product / farmtotable-breakfast-sandwich”。

这是否可能，如果可以的话，你可以帮助我吗？

Answer 1

您可以通过以下方式覆盖父网址：

.state('menu.detail', {
    parent: 'menu.list',
    url: '^/product/:productSlug',
    params: {
        productID: {
            value: ""
        },
        productSlug: {
            value: ""
        },
        productName: {
            value: ""
        },
        Name: {
            value: "Breakfast"
        },
        Type: {
            value: null
        },
        MenuListItemID: {
            value: null
        }

    },
    views: {
        '@': {
            templateUrl: '/templates/menu/productSingle.html',
            controller: 'ProductSingleCtrl as PSC'
        }
    },

    ncyBreadcrumb: {
        label: '{{productName}}'
    }

});

AngularJs UI路由器URL格式

1 个答案: