Angular oi-only 编码参数

Question

我的路由器是这样的：

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

但是当我使用

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

with mypath=part1/part2 我希望它变成 /project/part1/part2 但是我得到 /project/part1%252Fpart2.

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

Answer 1

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

If you really don't want the slash encoded for you, register a custom type with your regexp and declare item_id to be your custom type, i.e., 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 参数可能包含多个斜杠。如果路径=part1/part2，那么您可以通过使用 ui-sref 或 [=17= 获得这样的路由 /project/part1%252Fpart2 ].因此，要获得正确的路由（即 /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 we can use raw:true param which will disable url-encoding of parameter as described 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 oi-only 编码参数

Angular ui-sref encode parameter

angularjs

angular-ui-router