角度ui.router ui-sref替换URL字符-美化

Question

我正在寻找一种可能替换掉ui-sref中的字符，同时尊重目标URL。

.state('base.product.detail', {
    url: 'detail/:productName-:productId/'

现在，URL如下所示：

Now: 
http://localhost/detail/My%20Product%20Name-123456789/

Should:
http://localhost/detail/My-Product-Name-123456789/

我想摆脱％20（它们也直接在ui-sref =“”内部生成），并用减号（-）替换。

任何想法如何做到这一点？

问候，马库斯

Answer 1

注册用于封送和拆组数据的自定义类型。此处的文档：http : //angular-ui.github.io/ui-
router/site/#/api/ui.router.util。$ urlMatcherFactory

让我们定义一个自定义类型。实现编码，解码，是和模式：

  var productType = {
    encode: function(str) { return str && str.replace(/ /g, "-"); },
    decode: function(str) { return str && str.replace(/-/g, " "); },
    is: angular.isString,
    pattern: /[^/]+/
  };

现在，将自定义类型注册为“产品” $urlMatcherFactoryProvider：

app.config(function($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider) {
  $urlMatcherFactoryProvider.type('product', productType);
}

现在，将您的url参数定义为产品，然后自定义类型将为您完成映射：

  $stateProvider.state('baseproductdetail', {
    url: '/detail/{productName:product}-:productId/',
    controller: function($scope, $stateParams) { 
      $scope.product = $stateParams.productName;
      $scope.productId = $stateParams.productId;
    },
    template: "<h3>name: {{product}}</h3><h3>name: {{productId}}</h3>"
  });

工作小伙伴：http
://plnkr.co/edit/wsiu7cx5rfZLawzyjHtf?
p=
preview