2015-01-08 9 views
8

Il mio router si presenta così:parametro encode ui-sref angolare

.state('project', { 
     'url': '/project/*path', 
     'controller': 'ProjectController', 
     'templateUrl': '/pages/project.html', 
    }); 

ma quando uso

ui-sref="project({path: mypath})" 

con mypath=part1/part2 mi aspetto il che si trasformi in /project/part1/part2 ma invece ottengo /project/part1%252Fpart2.

Come posso far passare il parametro senza codificarlo?

risposta

8

Come era described here, è necessario dichiarare il tipo di variabile personalizzato per il parametro URL in modo che le barre non siano codificate. Citando commento da github:

Se davvero non si vuole la barra codificato per te, registrare un tipo personalizzato con la vostra espressione regolare e dichiarare item_id per essere il vostro tipo personalizzato, ad esempio, url:/{item_id: MyType}

function valToString(val) { return val != null ? val.toString() : val; } 
function valFromString(val) { return val != null ? val.toString() : val; } 
function regexpMatches(val) { /*jshint validthis:true */ return this.pattern.test(val); } 
$urlMatcherFactory.type("MyType", { 
    encode: valToString, 
    decode: valFromString, 
    is: regexpMatches, 
    pattern: /[^/]+\/[^/]+/ 
}); 
+0

Grazie! era esattamente quello che stavo cercando – amitdar

+0

Hai qualche soluzione su come posso disabilitare la codifica della barra se altrimenti lo stato (404) è attivato (url: "* path")? – Vlatko

+0

[Non specificare il percorso per la pagina di errore 404.] (Http://stackoverflow.com/a/25722055/878514) – fracz

2

per risolvere questo problema è possibile modificare uno stato utilizzando $ location.path(), che ha barre in stateparams. Per esempio, se il nostro stato è come questo:

app.js

.state('project', { 
    'url': '/project/*path', 
    'controller': 'ProjectController', 
    'templateUrl': '/pages/project.html', 
}); 

In questo caso path param maggio contiene più barre .Se percorso = part1/part2 poi si arriva percorso come questo /project/part1%252Fpart2 utilizzando ui-sref o $state.go(). Quindi, per ottenere il routing corretto (ad esempio /project/part1/part2), utilizzare $ location.path() per modificare uno stato.

HTML:

<a ng-click="goToMyState()">{{label}}</a> 

Controller:

$scope.goToMyState = function() { 
    var path = '/part1/part2' 
    $location.path('/project' + path); 
}; 
1

nella nuova ui-router 1.0 possiamo usare prima: vero param che disabilitare URL-codifica del parametro come descritto here

//link to state 
<md-button ui-sref="content({slug:'hello-world/'})">Hello world</md-button> 

$urlMatcherFactoryProvider.type('SlashFix', { 
     raw: true, 
    }); 


    $stateProvider 
     .state('content',{ 
     url: '/{slug:SlashFix}', 
     ... 

Una spiegazione più dettagliata può essere trovata qui:

https://www.coditty.com/code/angular-ui-router-replacing-slash-with-2f-quick-fix