使用Angular的$ location.path()更新后,浏览器后退按钮不会触发重新加载

时间:2015-01-30 22:39:31

标签: angularjs browser browser-history

情况:

在我的AngularJS应用程序的一个视图中,我有两个分页按钮,它们使用$ http来请求下一个和之前的数据。我正在使用ng-click="getNext(url)"而不是href="#/items/:itemId"的锚标记。我这样做的原因是我可以快速地异步浏览我的内容而不会触发页面重新加载。这很好用,但是使用这种方法可以绕过更新页面的URL,这样就可以让你当前的内容与你的URL的id不同步(即路径是#/ items / 3,但你当前正在查看第9项)。通过使用$location.path('items/' + rsp.id)更新JS中的URL,可以轻松解决此问题。现在,我可以以异步方式获取数据,并且仍然能够刷新,添加书签,发送链接并显示正确/当前项目。

问题:

问题是,如果用户点击getNext()几次,然后尝试使用浏览器的后退按钮返回,则URL会更新,但由于某种原因,浏览器不执行刷新 - 它只是坐在那里并更新URL。仅当历史记录中的项目来自同一视图并且我已使用位置服务更新ID时,才会出现这种情况。

任何想法都会受到赞赏。

到目前为止我尝试了什么

承诺+标志

我一直在玩window.onpopstate,但截至目前我没有任何办法让window.onpopstate区分浏览器点击和用{{更新网址的用户界面点击>> 1}};现在无论来源如何,它都会触发事件。所以我尝试设置一个标志,假设每次此事件触发其浏览器事件,但是当它是基于UI的事件时,我可以禁用该标志,因为我的_myRequestFn()将处理它。即使使用此承诺设置,当_myRequestFn()被触发时,它仍会触发window.onpopstate。

$location.path()

欺骗

通过#/ item / 5>回击#/ item / 4> #/ item / 3只更新URL而不是路径,但如果历史记录有不同的参数#/ thing / 2> #/ item / 2触发页面刷新。由于浏览器后退按钮有效,如果历史来自不同的参数,我想看看我是否加载了不同的参数,它会起作用。所以我创建了一个#/ item-a和#/ item-b路由,它加载了相同的模板并使用了相同的控制器,只需从每个请求的a / b切换。我永远不会向某人推荐这个解决方案,我更多的是看到我是否可以触发刷新。

更新 IRC上有很多人建议我使用UI-Router。我真的想尝试使用开箱即用的Angular解决方案。重构我的整个路由设置以使用UI-Router不是最佳解决方案。

1 个答案:

答案 0 :(得分:-1)

var socket = io.sockets.connected[id]

来自文档:

  

在HTML5模式下,$ location服务getter和setter通过HTML5 history API与浏览器URL地址进行交互。这允许使用常规URL路径和搜索段,而不是它们的hashbang等价物。