10

ターゲットの URL を考慮して、ui-sref の文字を置き換える可能性を探しています。

.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="" 内で直接生成されます) を取り除き、マイナス (-) に置き換えたいと思います。

それを行う方法はありますか?

よろしく、 マーカス

4

2 に答える 2

16

データをマーシャリングおよびアンマーシャリングするカスタム型を登録します。ドキュメントはこちら: http://angular-ui.github.io/ui-router/site/#/api/ui.router.util .$urlMatcherFactory

カスタムタイプを定義しましょう。エンコード、デコード、is、およびパターンを実装します。

  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

于 2015-01-15T01:59:29.417 に答える