如何使用 AngularJS UI-router 通过可选参数捕获此 URL？

Question

我正在使用 AngularJD ui-router 来捕获我的 URL 并将两个参数从该 URL 发送到我的控制器。以下是我的要求：

• 第一个参数是强制整数 (id)
• 第二个参数是可选字符串（slug）
• 两个参数用/隔开
• 我希望它忽略任何单个尾随 /

目前，我正在这样做：

$stateProvider.state('mystate',
  {
    url: '/mystate/{id:int}{slug:(?:/[^/]+)?}',
    params: {
      slug: {value: null}
    },
    templateUrl: 'partials/mystate.html',
    controller: function($stateParams) {
      console.log('$stateParams.id=',$stateParams.id, ' $stateParams.slug=',$stateParams.slug);
    }
  }

对于 URL：mystate/1 这正确捕获：

$stateParams.id=1, $stateParams.slug=null

对于 URL：mystate/1/myslug 这捕获了 slug 的错误值：

$stateParams.id=1, $stateParams.slug=/asdad

对于 URL：mystate/1/ 这不会捕获任何内容。

对于 URL：mystate/1/myslug/ 这不会捕获任何内容。

我该如何编写它才能正确捕获所有上述四个 URL，但不会将任何 /s 传递给控制器​​？

Answer 1

对于可选的斜杠，您需要在配置块中set strict mode to false：

angular.module('yourModule').config(['$urlMatcherFactoryProvider', function($urlMatcherFactoryProvider) {
  $urlMatcherFactoryProvider.strictMode(false);
}]);

对于可选参数，here 进行了长时间的讨论。最后，他们建议使用squash：

$stateProvider.state('mystate',
{
  url: '/mystate/{id:int}/:slug',
  params: {
    slug: {value: null, squash: true}
  },
  templateUrl: 'partials/mystate.html',
  controller: ['$stateParams', function($stateParams) {
    console.log('$stateParams.id=',$stateParams.id, ' $stateParams.slug=',$stateParams.slug);
  }]
}

squash有很好的documentation，如果设置为true，则在默认值时省略URL中的参数。