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);
    }
  }

对于网址：mystate/1这正确捕获：

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

对于网址：mystate/1/myslug这会捕获slug的错误值：

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

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

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

如何编写此代码以便正确捕获上述所有四个URL但未将/传递给控制器？

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中的参数。

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

1 个答案: