AngularJS - Best way to update $route parameter

Question

I have several routes that are different, but contain similar parameters.
Example:

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

Notice all three views use the same Charts Controller to control the view. Its a fairly generic controller but it needs toggle between available chartTypes... while keeping the rest of the route.
Example: (THIS DOESN'T WORK)

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'

Does anyone have any idea how to easily update parameters of a route without completely re-typeing or rebuilding the route path?

Answer 1

Since angular 1.3 you can use $route.updateParams(newParams) to change route params.

Here is a quote from the angular docs...

$route.updateParams(newParams);

Causes $route service to update the current URL, replacing current route parameters with those specified in newParams. Provided property names that match the route's path segment definitions will be interpolated into the location's path, while remaining properties will be treated as query params.

Answer 2

If it's possible, I would recommend you to use ui-router instead. It's more powerful than ngRoute in many aspects.

Essentially, this module has a higher level concept called state wrapping the underlying route which shields you from working directly with lower route level like route urls.

For a comparison: What is the difference between angular-route and angular-ui-router?

With ui-router, you can implement your code like this:

$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"
  })

And you could just use this code to navigate between states:

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

Documentation

Answer 3

The lack of this simple feature annoyed me, so I Implemented it and filed a PR on GitHub