3

我试图利用后退按钮的历史，所以我使用传统的 $routeProvider 和一个 url
.../arg1/something/arg2/something,else/arg3/another/arg4/yet,another/arg5/final
但是，如果argument缺少一个，以下路由提供程序将无法将剩余的参数传递给 $routeParams ：

angular.module('myApp', [ … ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/arg1/:args1/arg2/:args2/arg3/:args3/arg4/:args4/arg5/:args5', {
        templateUrl: 'views/main.html',
        controller: 'MainController'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

如何配置 $routeProvider 以将存在的参数（如果可能，以任何顺序，如果不是至少按照没有参数的顺序）传递给控制器​​，而不必声明所有 720（6 ！）以不同顺序或根本没有不同参数的不同场景？

然后我计划使用这些值通过以下方式填充控制器中的过滤器：

    function filterRouteParams (rp){
  if(rp.args1){
    $scope.args1 = rp.args1;
  }
  if(rp.args2){
    $scope.args2 = rp.args2.split(',');
  }
  if(rp.args3){
    $scope.args3 = rp.args3.split(',');
  }
  …
}

我?对在 URL 上使用查询有点熟悉，但据我所知，当我想更新它并允许使用后退按钮和维护查询时，我不知道如何将其绑定到历史记录，但是我愿意接受教育！

4

3 回答 3

6

我不明白你的问题，还是变得复杂了？

为此，您只需简单地使用查询字符串。它与后退和前进按钮、历史推送/状态完美配合。

  angular.module('myApp', ['ngRoute'])
   .controller('MainController', function($scope, $route, $routeParams, $location) {
       $scope.$route = $route;
       $scope.$location = $location;
       $scope.$routeParams = $routeParams;
   })
   .controller('FilterController', function($scope, $routeParams) {
   })
  .config(function($routeProvider) {
    $routeProvider
     .when('/filter', {
      template: 'inside filter',
      controller: 'FilterController'
    })
    .otherwise({
      redirectTo: '/filter'
    });
  });

这是上面代码的运行示例，http://run.plnkr.co/plunks/OS38E38J11FeDS1hyHde/#/filter?c =3&d=4

这是plnkr。

于 2014-07-30T20:26:48.233 回答
2

我认为处理此问题的最佳方法是通过查询字符串参数，因此您的路线定义如下：

.when('/filter', {
    controller: 'MainController'
})

您只需使用类似的 URL /filter?foo=44&bar=123&baz=true，或在代码中：

$location.path('/filter').search('foo', $scope.fooValue).search('bar', $scope.barValue);

参数是可选的，可以按任意顺序指定，因为ngRoute不会对参数名称或值进行任何验证。

要访问控制器中的值：

.controller('MainController', function($scope, $routeParams) {

    if ($routeParams.foo) {
        // do argument processing
    }

})

文档$routeParams：https ://docs.angularjs.org/api/ngRoute/service/$routeParams

于 2014-07-29T23:43:21.210 回答
0

我不确定是否真的理解，但你能用'吗？在你的路线里面？例如

  $routeProvider
  .when('/arg1/:args1?/arg2/:args2?/arg3/:args3?/arg4/:args4?/arg5/:args5?', {
    templateUrl: 'views/main.html',
    controller: 'MainController'
  })
  .otherwise({
    redirectTo: '/'
  });

以下任何 URL 都是有效的

/arg1/arg2/arg3/arg4/arg5
/arg1/value1/arg2/arg3/arg4/arg5/value5
....
/arg1/value1/arg2/value2/arg3/value3/arg4/value4/arg5/value5

那是你要找的吗？

不幸的是，我找不到一种方法来删除这样的参数
/arg1/arg2/arg4/value4/arg5/value5

于 2014-07-29T18:38:35.777 回答