angle ui.router ui-sref URL文字を置き換える - 美しい

Question

私はターゲットの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/ 

私は（（直接UI-SREF =「」の内部で生成されている）の20％を取り除くとマイナスに置き換える取得したいです - ）。

どうすればいいですか？

よろしく、マーカス

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

の作業plunk：http://plnkr.co/edit/wsiu7cx5rfZLawzyjHtf?p=preview

Answer 2

非常に簡単なアプローチ：

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

テンプレートに：UI-SREFは、（別のサービスであっても良いか）を使用するコントローラにおいて

：

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

ルーティング自体は変更されていませんでしたが、直腸に