angular ui.router ui-sref 替换 url 字符 - 美化答案

【问题标题】：angular ui.router ui-sref replace url characters - beautifyangular ui.router ui-sref 替换 url 字符 - 美化
【发布时间】：2015-03-11 04:16:26
【问题描述】：

我正在寻找一种可能性来替换 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="" 中生成）并用减号 (-) 替换它们。

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

问候，马库斯

【问题讨论】：

标签： angularjs angular-ui-router ui-sref

【解决方案1】：

注册一个编组和解组数据的自定义类型。这里的文档：http://angular-ui.github.io/ui-router/site/#/api/ui.router.util.$urlMatcherFactory

让我们定义一个自定义类型。实现encode、decode、is和pattern：

  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

【讨论】：

是否可以使用自定义类型，使大括号 ({) 在 URL 中不显示为“%7B”？参考我提出的这个问题stackoverflow.com/questions/35204064/…
如何用加号（+）替换空格？我试过用“+”改变“-”，但它不起作用。谢谢。

【解决方案2】：

非常简单的方法：

在使用 ui-sref 的控制器中（或者在单独的服务中更好）：

$scope.beautyEncode = function(string){
    string = string.replace(/ /g, '-');
    return string;
};

在模板中：

<a href="" ui-sref="base.product.detail({productName: beautyEncode(product.name), productId: product.id})">

路由本身没有改变，角度路由仍然正确。

【讨论】：

是的，这是最快和最简单的。它应该是公认的答案。