6

I'd like for changes in the URL to drive my application, and for changes in the application to change the URL, but not actually change state.

I have a route like this. The country/city example is a bit contrived, hopefully that doesn't confuse things. The relationship in the real application is somewhat hierarchical. Child views don't seem a fit though because there's no need for nested views.

$stateProvider.state( 'viewMap', {
  url: '/viewMap/:country/:city',
  templateUrl: 'pages/viewMap/viewMap.html',
  controller: 'ViewMapController'
};

In ViewMapController, I can construct the page based on $stateParams.country and .city. As these values change, my application reacts and I want the url to stay in sync. I don't want to reload the whole page, however. I just want to update the url and push a history state on to the stack.

I understand I could manually construct a string:

updateUrl = function() {
 window.location.hash = '#/viewMap/'+ $stateParams.country +'/'+ $stateParams.city
}

This feels fragile, as the way I build the string is separate from the way the framework parses it. I would prefer for the framework to build me a string based on the current params, but $state.href('.') describes the current route, which doesn't include $stateParams that haven't yet been activated/navigated to.

I've also looked at reloadOnSearch, but I think it only applies to query params.

Is there a better way to model this? It feels like I'm fighting the framework over something simple.

SimplGy
  • 20,079
  • 15
  • 107
  • 144

1 Answers1

1

You can pass state params to $state.href function to get the complete URL

$state.href('.', $stateParams)

To generate arbitrary urls you can pass non-current params and/or configuration:

$state.href('.', {country:'usa',city:'sf'}, {absolute:true})
lampe
  • 46
  • 3