角ui.router ui-sref替換url字符 - 美化

我正在尋找一種可能性來替換ui-sref中的字符，尊重目標的URL。角ui.router ui-sref替換url字符 - 美化

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

現在，這些網址看起來像：

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

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

我想擺脫的％20（這也直接UI的SREF內部產生=「」），並用減號替換它們（ - ）。

任何想法如何做到這一點？

問候，馬庫斯

來源

2015-01-13 Markus

註冊編組和解組數據的自定義類型。 Docs here：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); 
}

現在定義網址參數作爲產品和定製型會做你映射：

$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-15 01:59:29

它是p可以使用自定義類型，所以大括號（{）不是'％7B'在URL中的apper？參考這個問題我已經取得http://stackoverflow.com/questions/35204064/angular-ui-router-curly-brackets-etc-in-url – Devl11

如何用加號（+）替換空格？我嘗試用「+」改變「 - 」，但它不起作用。謝謝。 –

非常簡單的方法：

在控制器中，其中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})">

路由本身沒有改變，角度是否仍然是路由rectly。

來源

2015-01-13 13:23:51 Markus

角ui.router ui-sref替換url字符 - 美化

回答

相關問題