angularjs ui-router replace spaces with dashes

Question

I am trying to replace spaces with dashes in my route. I have followed this SO:

angular ui.router ui-sref replace url characters - beautify

But I can't get it to work. My state looks like this:

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
            }
        };
    };
};

I have then set up my $$urlMatcherFactoryProvider.type like this:

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: /[^/]+/
    });
};

In my view, I reference the state like this:

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

But it isn't working. When I click the link, it takes me to this url:

/cameras/picks/%7B%20shortTitle:%20title%20%7D

Which isn't right at all. Does anyone know what I am doing wrong?

Hello. Try to remove the spaces in "/{ shortTitle: title }". You can do just: "/{shortTitle:title}" and test it. :D Let me know if this can solve your problem. — L. Figueredo, Oct 17 '17 at 10:20
I thought that, but it doesn't seem to do anything. I have a plunker that works, which suggests there is something else wrong — r3plica, Oct 18 '17 at 10:13
In this plunker, when I use: url: '/home/{ name: productName }', my result is: /home/%7B%20name:%20productName%20%7D ... And when I use '/home/{name:productName}', the result seems to be right: /home/long-parameter-with-spaces — L. Figueredo, Oct 18 '17 at 10:47
It's hard to tell if something else is wrong from your snippets. Can you create a sample plunker to reproduce the problem? — Samir Aguiar, Oct 18 '17 at 15:13
It's now 1.6.6 but it was 1.5.4. Either way, I can't get it to work but it must be something wrong with my project, because the plunker works — r3plica, Oct 23 '17 at 16:15

angularjs ui-router replace spaces with dashes

0 Answers0