kątowa ui-sref parametrów kodowania

Question

Mój router wygląda tak:

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

ale kiedy używam

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

z mypath=part1/part2 Spodziewam się, że to przekształcić /project/part1/part2 ale zamiast ja dostać /project/part1%252Fpart2.

Jak mogę przekazać parametr bez kodowania?

Answer 1

Jako że był to described here, musisz zadeklarować niestandardowy typ zmiennej dla parametru URL, aby ukośniki nie były zakodowane. Cytując komentarz od github:

Jeśli naprawdę nie chcesz ukośnik zakodowany dla ciebie, zarejestruj typ niestandardowy z regexp i deklarują ITEM_ID być niestandardowy typ, czyli 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: /[^/]+\/[^/]+/ 
}); 

Answer 2

Aby rozwiązać ten problem, można zmienić stan za pomocą $ location.path(), która ma ukośniki w stateparams. Na przykład jeśli nasz stan jest tak:

app.js

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

W tym przypadku path param maja zawiera wiele ukośniki .Jeżeli path =/part1 part2 następnie dostać trasą jak ten /project/part1%252Fpart2ui-sref lub za pomocą $state.go(). Aby uzyskać poprawne trasowanie (tj. /project/part1/part2), użyj zmiennej $ location.path(), aby zmienić stan.

HTML:

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

Kontroler:

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

Answer 3

w nowym ui-router 1.0 możemy użyć surowego: prawdziwą param który będzie wyłączyć URL kodowanie parametr opisany 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}', 
     ... 

Bardziej szczegółowe wyjaśnienie można znaleźć tutaj:

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