Angular ui-sref 编码参数

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的评论：

如果您真的不希望为您编码斜线，请使用您的正则表达式注册一个自定义类型并将 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 参数可能包含多个斜杠。如果 path=part1/part2 则您通过使用ui-sref 或$state.go() 获得类似/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 中，我们可以使用 raw:true 参数，这将禁用参数的 url 编码，如 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