Угловой параметр кодирования пользовательского интерфейса

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:

Если вы действительно не хотите, чтобы слеш кодировался для вас, зарегистрируйте пользовательский тип с помощью регулярного выражения и объявите 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 Параметр может содержать несколько слешей. Если путь = часть1/ часть2, то вы получите такой маршрут /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-кодирование параметра, как описано здесь

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