角ui.router UI的更换SREF的URL字符 - 美化 [英] angular ui.router ui-sref replace url characters - beautify

问题描述

我在寻找一种可能性在UI-SREF替换字符，尊重目标的URL。

I'm searching for a possibility to replace characters in the ui-sref, respecting the URL of a target.

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

现在，这些网址如下：

The URLs now look like:

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

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

我想摆脱的20％（这也直接在UI的SREF =生成），并用减号代替它们（ - ）。

I want to get rid of the %20 (which are also directly generated inside ui-sref="") and replace them with a minus (-).

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

Any ideas how to do that?

问候，马库斯

推荐答案

寄存器，马绍尔群岛和的解组数据的自定义类型。文档在这里：<一href=\"http://angular-ui.github.io/ui-router/site/#/api/ui.router.util\">http://angular-ui.github.io/ui-router/site/#/api/ui.router.util.$urlMatcherFactory

Register a custom type that marshalls and unmarshalls the data. Docs here: http://angular-ui.github.io/ui-router/site/#/api/ui.router.util.$urlMatcherFactory

让我们定义一个自定义类型。实现连接code，德code，是和模式：

Let's define a custom type. Implement encode, decode, is and pattern:

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

现在与注册自定义类型为产品 $ urlMatcherFactoryProvider ：

Now register the custom type as 'product' with $urlMatcherFactoryProvider:

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

现在定义网址参数作为产品和自定义类型会做的映射关系对你：

Now define your url parameter as a product and the custom type will do the mapping for you:

  $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>"
  });

工作普拉克：<一href=\"http://plnkr.co/edit/wsiu7cx5rfZLawzyjHtf?p=$p$pview\">http://plnkr.co/edit/wsiu7cx5rfZLawzyjHtf?p=$p$pview

这篇关于角ui.router UI的更换SREF的URL字符 - 美化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！