我有一个Angular SPA,它展示了基于一些餐厅数据的不同分类(请参阅m.amsterdamfoodie.nl),包括各种推荐列表和谷歌地图上的位置。我希望每个列表都有自己的URL地址。为了让Google能够爬取这些不同的列表,我在离屏导航中使用了<a>
标签。
目前,<a>
标签会导致视图刷新,这在地图上非常明显。
- 我可以使用
ng-click
和$event.preventDefault()
来防止这种情况(请参见下面的代码片段),但随之而来的是需要实现一种更新浏览器URL的方法。 - 但是,在尝试使用Angular的
$state
或浏览器的history.pushstate
时,我最终触发了状态更改和视图刷新...!
因此,我的问题是如何更新模型和URL,但不刷新视图?(另请参见Angular/UI-Router - How Can I Update The URL Without Refreshing Everything?)
我已经尝试了很多方法,并且目前有这个HTML:
<a href="criteria/price/1" class="btn btn-default" ng-click="main.action($event)">Budget</a>
在控制器中:
this.action = ($event) ->
$event.preventDefault()
params = $event.target.href.match(/criteria\/(.*)\/(.*)$/)
# seems to cause a view refresh
# history.pushState({}, "page 2", "criteria/"+params[1]+"/"+params[2]);
# seems to cause a view refresh
# $state.transitionTo 'criteria', {criteria:params[1], q:params[2]}, {inherit:false}
updateModel(...)
我认为正在发生的是,我正在触发$stateProvider
代码:
angular.module 'afmnewApp'
.config ($stateProvider) ->
$stateProvider
.state 'main',
url: '/'
templateUrl: 'app/main/main.html'
controller: 'MainCtrl'
controllerAs: 'main'
.state 'criteria',
url: '/criteria/:criteria/:q'
templateUrl: 'app/main/main.html'
controller: 'MainCtrl'
controllerAs: 'main'
可能的一个线索是,如果我加载以下代码,例如 http://afmnew.herokuapp.com/criteria/cuisine/italian,则在导航时视图会刷新,而如果我加载 http://afmnew.herokuapp.com/,则没有刷新,但 URL 也没有更新。我完全不明白为什么会发生这种情况。