Angular ui-router setup for this use case?

Question

I want to redraw a line in a line chart without reloading it (neither template nor controller) completely when navigating from country/5 to country/7. Can this be done with ui-router?

State

country/:id

Template with directive - country.html

<lineChart data="scope.someData">

Controller

onStateParamsChange => fetch data, set scope.someData

Answer 1

As of today, there is no official support for what you're looking for, which in UI Router parlance is considered 'dynamic parameters'. However, if you check out this experimental branch and help us out by testing and providing feedback, it will get merged to master sooner.

Set up your route/state like so:

$stateProvider.state("country", {
    url: "/country/{id:int}",
    params: { id: { dynamic: true } }
    /* other state configuration here */
});

Then, in your controller, you can observe changes to id like so:

$stateParams.$observe("id", function(val) {
    // val is the updated value of $stateParams.id
    // Here's where you can do your logic to fetch new data & update $scope
});