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?
0 comments:
Post a Comment