Angular ui-sref kodieren Parameter

Question

Mein Router so aussieht:

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

aber wenn ich

verwenden

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

mit mypath=part1/part2 erwarte ich, dass die es in /project/part1/part2 drehen, aber ich erhalte stattdessen /project/part1%252Fpart2.

Wie kann ich Parameter übergeben, ohne sie zu codieren?

Answer 1

Da es described here war, müssen Sie benutzerdefinierten Variablentyp für URL-Parameter deklarieren, um nicht codierte Schrägstriche zu haben. Zitiert Kommentar von Github:

Wenn Sie wirklich nicht den Schrägstrich für Sie kodiert wollen, einen benutzerdefinierten Typ mit regexp registrieren und erklären item_id Ihre benutzerdefinierten Typ sein, das heißt, 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

dieses Problem beheben Sie einen Zustand, indem Sie $ location.path ändern können(), die Schrägstriche in stateparams hat. Zum Beispiel, wenn unser Zustand ist wie folgt:

app.js

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

In diesem Fall path param können mehrere Schrägstriche enthält .Wenn path = Teil1/Teil2 dann erhalten Sie Route wie diese /project/part1%252Fpart2 unter Verwendung ui-sref oder $state.go(). Um das richtige Routing (d. H. /project/part1/part2) zu erhalten, verwenden Sie $ location.path(), um einen Status zu ändern.

HTML:

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

Controller:

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

Answer 3

in neuen ui-router 1.0 können wir roh verwenden: true param die URL-Codierung des Parameters als 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}', 
     ... 

beschrieben deaktivieren

Eine ausführlichere Erklärung finden Sie hier:

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