Question

我的路由器看起来像这样：

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

但是当我使用

时

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

mypath=part1/part2我希望它变成/project/part1/part2，但我会得到/project/part1%252Fpart2。

如何在不编码的情况下传递参数？

Answer 1

由于它是described here，您需要为URL参数声明自定义变量类型，以便不对斜杠进行编码。引用github的评论：

如果你真的不想为你编码的斜杠，请在regexp中注册一个自定义类型，并将item_id声明为你的自定义类型，即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

要解决此问题，您可以使用$ location.path（）更改状态，该位置在stateparams中包含斜杠。例如，如果我们的州是这样的：

app.js

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

在这种情况下，path param可能包含多个斜杠。如果path = part1 / part2，则使用/project/part1%252Fpart2或ui-sref获得此$state.go()之类的路由。因此，要获得正确的路由（即/project/part1/part2），请使用$ location.path（）来更改状态。

HTML：

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

控制器：

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

Answer 3

在新的ui-router 1.0中，我们可以使用raw：true param，它将禁用参数的url-encoding，如上所述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}',
       ...

更详细的解释可以在这里找到：

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

Angular ui-sref编码参数

3 个答案: