改变角度的UI路由器的URL而不需要刷新页面 [英] Change url of angular-ui-router without reloading page

问题描述

我想在URL的变化来驱动我的应用程序，并在应用程序中的变更的网址的变化，但实际上没有改变状态。

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'
};

在ViewMapController，我可以构建基于 $ stateParams.country 页面和。市。由于这些值的变化，我的应用程序反应，我想要的网址，以保持同步。我不想重新加载整个页面，但是。我只是想更新URL和堆栈推向一个历史状态。

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
}

这脆弱的感觉，因为我的方式建立的字符串是从框架解析的方式分开。我想preFER为框架，根据当前PARAMS建立了我的字符串，但 $ state.href（'。'）描述了当前的路线，没有按T包含$尚未被激活stateParams /浏览到。

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.

我也看了 reloadOnSearch ，但我认为它仅适用于查询参数。

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.

推荐答案

您可以通过状态PARAMS到的 $ state.href 函数来获得完整的URL

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

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

要生成任意URL可以传递的非流动PARAMS和/或配置：

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

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

这篇关于改变角度的UI路由器的URL而不需要刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！