angolare ui.router ui-sref sostituire i caratteri url - abbellire

Question

Sto cercando la possibilità di sostituire i caratteri nell'i-sref, rispettando l'URL di un target.

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

Gli URL ora assomigliano:

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

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

voglio eliminare il% 20 (che sono anche direttamente generata all'interno ui-sref = "") e sostituirli con un meno (-).

Qualche idea su come farlo?

saluti, Markus

Answer 1

Registrare un tipo personalizzato che esegue marshalling e unmarshalls dei dati. Documenti qui: http://angular-ui.github.io/ui-router/site/#/api/ui.router.util. $ UrlMatcherFactory

Definiamo un tipo personalizzato. Implementare codificare, decodificare, è e modello:

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

ora registrare il tipo personalizzato come 'prodotto' con $urlMatcherFactoryProvider:

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

Ora definire il vostro parametro url come un prodotto e il tipo personalizzato farà il mapping per voi:

$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 di lavoro: http://plnkr.co/edit/wsiu7cx5rfZLawzyjHtf?p=preview

Answer 2

approccio molto semplice:

Nel controllore, in cui viene utilizzato il ui-sref (o meglio ancora in un servizio separato):

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

Nel modello :

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

L'instradamento stesso non è stato modificato, angolare ha fatto il ciclo ancora cor rettamente.