データをマーシャリングおよびアンマーシャリングするカスタム型を登録します。ドキュメントはこちら: 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