角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

由于它是在此描述，您需要为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可能包含多个斜杠，.If path=part1 1/part1 2，然后使用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-路由器1.0中，我们可以使用raw:true param，这将禁用这里描述的参数的url编码。

    //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