angularjs ui路由器将空格替换为破折号

我正在尝试在路线中用破折号替换空格。我遵循了这一点，因此：

但我不能让它工作。 我的状态是这样的：

function productRoute($stateProvider) {

    $stateProvider
        .state('home.category.picks.product', configureWhyRoute());

    function configureWhyRoute() {
        return {
            url: '/{ shortTitle: title }',
            views: {
                '@home.category': {
                    templateUrl: 'app/wizard/product/product.html',
                    controller: 'ProductController',
                    controllerAs: 'controller'
                },
                'menu@': {
                    templateUrl: 'app/core/menu/sub-menu.html',
                    controller: 'MenuController',
                    controllerAs: 'controller'
                }
            },
            resolve: {
                product: ['$stateParams', 'products', function ($stateParams, products) {
                    return products.find(function (product) {
                        return product.shortTitle === $stateParams.shortTitle;
                    });
                }]
            },
            data: {
                pageTitle: 'Product description',
                hideFooter: true
            }
        };
    };
};

function config($locationProvider, $httpProvider, $urlMatcherFactoryProvider, cfpLoadingBarProvider) {
    /*** removed for brevity ***/
    $urlMatcherFactoryProvider.type('title', {
        encode: function (str) { return str && str.replace(/ /g, "-"); },
        decode: function (str) { return str && str.replace(/-/g, " "); },
        is: angular.isString,
        pattern: /[^/]+/
    });
};

ui-sref="home.category.picks.product({ shortTitle: product.shortTitle })"

然后，我设置了我的$$URLMacherFactoryProvider。键入如下内容：

function productRoute($stateProvider) {

    $stateProvider
        .state('home.category.picks.product', configureWhyRoute());

    function configureWhyRoute() {
        return {
            url: '/{ shortTitle: title }',
            views: {
                '@home.category': {
                    templateUrl: 'app/wizard/product/product.html',
                    controller: 'ProductController',
                    controllerAs: 'controller'
                },
                'menu@': {
                    templateUrl: 'app/core/menu/sub-menu.html',
                    controller: 'MenuController',
                    controllerAs: 'controller'
                }
            },
            resolve: {
                product: ['$stateParams', 'products', function ($stateParams, products) {
                    return products.find(function (product) {
                        return product.shortTitle === $stateParams.shortTitle;
                    });
                }]
            },
            data: {
                pageTitle: 'Product description',
                hideFooter: true
            }
        };
    };
};

function config($locationProvider, $httpProvider, $urlMatcherFactoryProvider, cfpLoadingBarProvider) {
    /*** removed for brevity ***/
    $urlMatcherFactoryProvider.type('title', {
        encode: function (str) { return str && str.replace(/ /g, "-"); },
        decode: function (str) { return str && str.replace(/-/g, " "); },
        is: angular.isString,
        pattern: /[^/]+/
    });
};

ui-sref="home.category.picks.product({ shortTitle: product.shortTitle })"

在我看来，我指的是这样一种状态：

function productRoute($stateProvider) {

    $stateProvider
        .state('home.category.picks.product', configureWhyRoute());

    function configureWhyRoute() {
        return {
            url: '/{ shortTitle: title }',
            views: {
                '@home.category': {
                    templateUrl: 'app/wizard/product/product.html',
                    controller: 'ProductController',
                    controllerAs: 'controller'
                },
                'menu@': {
                    templateUrl: 'app/core/menu/sub-menu.html',
                    controller: 'MenuController',
                    controllerAs: 'controller'
                }
            },
            resolve: {
                product: ['$stateParams', 'products', function ($stateParams, products) {
                    return products.find(function (product) {
                        return product.shortTitle === $stateParams.shortTitle;
                    });
                }]
            },
            data: {
                pageTitle: 'Product description',
                hideFooter: true
            }
        };
    };
};

function config($locationProvider, $httpProvider, $urlMatcherFactoryProvider, cfpLoadingBarProvider) {
    /*** removed for brevity ***/
    $urlMatcherFactoryProvider.type('title', {
        encode: function (str) { return str && str.replace(/ /g, "-"); },
        decode: function (str) { return str && str.replace(/-/g, " "); },
        is: angular.isString,
        pattern: /[^/]+/
    });
};

ui-sref="home.category.picks.product({ shortTitle: product.shortTitle })"

但它不起作用。当我单击链接时，它会将我带到以下url：

/摄像机/镜头/%7B%20s短片：%20title%20%7D

这完全不对。

---

有人知道我做错了什么吗？

你好。尝试删除“/{shortTitle:title}”中的空格。您只需执行：“/{shortTitle:title}”并对其进行测试：I’’我会告诉我这是否能解决你的问题。我是这么想的，但似乎没什么用。我有一个可用的plunker，这表明还有其他问题。您可以共享可用的plunker吗？在这个plunker中，当我使用url:“/home/{name:productName}”时，我的结果是：/home/%7B%20name:%20productName%20%7D。。。当我使用“/home/{name:productName}”时，结果似乎是正确的：/home/long参数和spacesHello。尝试删除“/{shortTitle:title}”中的空格。您只需执行：“/{shortTitle:title}”并对其进行测试：I’’我会告诉我这是否能解决你的问题。我是这么想的，但似乎没什么用。我有一个可用的plunker，这表明还有其他问题。您可以共享可用的plunker吗？在这个plunker中，当我使用url:“/home/{name:productName}”时，我的结果是：/home/%7B%20name:%20productName%20%7D。。。当我使用“/home/{name:productName}”时，结果似乎是正确的：/home/long参数加空格