如何使用angularjs的本地锚链接

Question

我在一个相当大的平面文档页面上使用angularjs。该页面有一些导航设计用于使用传统的url哈希链接。网址看起来像这样：

/documentation/flat#26166276-basic-events

导航发生后，这些网址会被重写，我会点击下一页。 angular初始化为： /documentation/flat#/26166276-basic-events

这打破了导航。如果我已经在/documentation/flat路径并点击其中一个哈希网址，它似乎有效。它被重写，但浏览器仍然关注页面的正确部分。

但是，如果哈希url是从不同的路径触发的，那么当angularjs重写发生时，浏览器将不会关注正确的DOM元素。

编辑：这是链接的标记看起来像

<a href="/documentation/flat#26166276-basic-events">Basic Events</a>

<h1 class="chap-header" id="26166276-basic-events">2.1.0 Basic Events</h1>

Answer 1

此主题在此处进一步讨论：

How to handle anchor hash linking in AngularJS

我使用了该线程的变体

if $location.$$url[0]== '#'
        $location.hash($location.$$url.replace('#', ''))
        $anchorScroll()

基本上允许我使用额外的#为任何锚链接添加前缀，angularjs将它们视为传统锚点

Answer 2

有一个非常愚蠢的解决方案：在锚ID的开头放一个/！

<a id='/my-id' />