如何在不破坏后退按钮的情况下混合触发页面刷新的链接,Angular的html5Mode = true？

Question

我将逐步介绍有问题的流程......

• 我加载google.com(仅作为起点)
• 我转到app.com
• 我导航到app.com/projects
• 我导航到app.com/api/test(通过window.location)
• 我看到了原始的JSON(到目前为止很好......)
• 我按回来,url更改为app.com/projects但我仍然看到JSON.
• 我再次按回来,url更改为app.com,但我仍然看到JSON.
• 我再次按回去,google.com加载.
• 我向前推,app.com加载好......一切恢复正常

奇怪的是,我只是html5Mode = true在Webkit- firefox按需工作时才观察到这一点......

...

首先,我的server.coffee看起来像这样:

app.get '/partials/:partial', routes.partials
app.get '/api/test', api.test
app.get '*', routes.index

基本上,所有请求都加载索引(引导Angular),视图/部分处理程序除外,以及使用原始JSON响应的测试api路由.

...

(我使用ui-router模块来管理嵌套视图和UI状态;它使用的$urlRouterProvider,与Angular非常相似$routeProvider)

其次,我的app.coffee看起来像这样:

app = angular.module('app', ['ui-router'])
.config([
    '$stateProvider'
    '$locationProvider'
    '$urlRouterProvider'
    ($stateProvider, $locationProvider, $urlRouterProvider)->
        $urlRouterProvider
            .when('/api/test', [
                '$window'
                '$location'
                ($window, $location)->
                    $window.location.href = '/api/test'
            ])
            .otherwise('/')
        $stateProvider
            .state 'home',
                url: '/'
                templateUrl: 'partials/index'
                controller: 'IndexCtrl'
            .state 'projects',
                url: '/projects'
                templateUrl: 'partials/projects'
                controller: 'ProjectsCtrl'
        $locationProvider.html5Mode(true).hashPrefix '!'
])

由于一切都是异步的,我不得不使用$window访问window.location.href来触发页面刷新,以便服务器处理路由.

所以我的问题是,我可以在html5Mode不破坏后退按钮的情况下混合触发页面刷新与Angular的链接吗？这只是一个Webkit错误,和/或有更好的方法吗？

理想情况下,我的应用程序运行在Angular之外 - 但是"about"或"contact"页面(不需要动态或异步)之类的东西将使用常规页面刷新直接从服务器提供...

救命!

Answer 1

两种选择:

1. 如果你正在使用<a />标签,请指定target="_self"让AngularJS知道它不应该捕获他们的点击(这些链接将由浏览器正常处理).这不是一个黑客; 这是正常记录的行为.
2. 使用$window.location = 'foo'你一直在做.这是可以接受的.