AngularJS - 更新$ route参数的最佳方法

时间:2012-11-29 23:09:44

标签: location angularjs routes

我有几条不同的路线,但包含类似的参数。
示例:

when '/user/:accountId/charts/:chartType', controller:ChartsController
when '/manager/:accountId/charts/:chartType', controller:ChartsController
when '/whatever/pathy/paththingy/charts/:chartType', controller:ChartsController

请注意,所有三个视图都使用相同的图表控制器来控制视图。它是一个相当通用的控制器,但它需要在可用的图表类型之间切换...同时保持其余的路线。
示例:(这不起作用)

if my currrent url is '/user/001/charts/comparison'
Then I call something like:
$route.current.params.chartType = 'newChart';
$route.reload(); // or soemthing similar?
I want the url to become '/user/001/charts/newChart'

有没有人知道如何在不完全重新输入或重建路径路径的情况下轻松更新路线参数?

3 个答案:

答案 0 :(得分:12)

由于角度为1.3,您可以使用$route.updateParams(newParams)来更改路线参数。

Here is a quote from the angular docs...

  

$ route.updateParams(newParams);

     

使$route服务更新当前URL,将当前路由参数替换为指定的URL   在newParams。提供与路径路径匹配的属性名称   段定义将插入到位置的路径中,   其余属性将被视为查询参数。

答案 1 :(得分:10)

如果可能,我建议你改用ui-router。它在许多方面比ngRoute更强大。

基本上,这个模块有一个更高级别的概念,称为状态包裹基础路线,屏蔽你直接工作,路线网址更低,路线网址等。

进行比较:What is the difference between angular-route and angular-ui-router?

使用ui-router,您可以像这样实现代码:

$stateProvider
  .state('user.chart', {
     url: '/user/:accountId/charts/:chartType',   
     controller: "ChartsController"   
  })
 .state('manager.chart', {
     url: '/manager/:accountId/charts/:chartType', 
     controller: "ChartsController"
  })
 .state('pathy.chart', {
     url: '/whatever/pathy/paththingy/charts/:chartType', 
     controller: "ChartsController"
  })

您可以使用此代码在状态之间导航:

$state.go('user.chart',{chartType:'newChart'},{inherit:true});

Documentation

答案 2 :(得分:5)

缺乏这个简单的功能让我烦恼,所以我Implemented it and filed a PR on GitHub