Angularjs中的锚链接？

Angularjs中的锚链接？

看来有几种方法可以做到这一点。

选项1：本机角度

Angular提供了一项

$anchorScroll

服务，但文档严重缺乏，我无法使其正常工作。

请访问http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-
id.html，
以获取有关的一些见解

$anchorScroll

。

选项2：自定义指令/本机Javascript

我测试的另一种方法是创建自定义指令并使用

el.scrollIntoView()

。通过基本上在指令链接函数中执行以下 *** 作，此方法相当不错：

var el = document.getElementById(attrs.href);el.scrollIntoView();

但是，当浏览器本机支持这两个功能时，同时执行这两个 *** 作似乎有点过头了，对吧？

选项3：Angular Override /本机浏览器

如果您看一下http://docs.angularjs.org/guide/dev_guide.services.$location及其“
HTML链接重写”部分，则会发现以下链接未重写：

包含目标元素的链接

例：

<a href="/ext/link?a=b" target="_self">link</a>

因此，您要做的就是将

target

属性添加到链接中，如下所示：

<a href="#anchorlinkID" target="_self">Go to inpage section</a>

Angular默认为浏览器，由于它是锚链接而不是其他基本URL，因此浏览器可根据需要滚动到正确的位置。

我之所以选择选项3，是因为它最好地依靠此处的本机浏览器功能，从而节省了我们的时间和精力。

要注意的是，在成功完成滚动和哈希更改之后，Angular会继续跟踪并将哈希重写为其自定义样式。 但是，浏览器已经完成其业务，您一切顺利。