如何处理AngularJS中的锚散列链接

Question

如何处理AngularJS中的锚散列链接

您知道如何很好地处理锚散列链接吗？安古拉杰?

对于一个简单的常见问题页面，我有以下标记

<a href="#faq-1">Question 1</a><a href="#faq-2">Question 2</a><a href="#faq-3">Question 3</a><h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3><h3 id="fa1-3">Question 3</h3>

当单击上述任何链接时，AngularJS截取并将我路由到一个完全不同的页面(在我的例子中，404页，因为没有匹配链接的路由)。

我的第一个想法是创建一个路径匹配“/常见问题/：一章“并在相应的控制器检查中$routeParams.chapter在匹配元素之后，然后使用jQuery向下滚动到它。

但是接着AngularJS又一次对我大发雷霆，只是滚动到页面的顶部。

所以，这里有谁在过去做过类似的事情，并且知道一个很好的解决方案？

编辑：切换到html5模式应该可以解决我的问题，但是无论如何我们还是得支持IE8+，所以我担心这不是一个被接受的解决方案：/

Answer 1

在我的例子中，我注意到如果修改$location.hash()..下面的伎俩奏效了.。$scope.scrollTo = function(id) {     var old = $location.hash();     $location.hash(id);     $anchorScroll();     //reset to old to keep any additional routing logic from kicking in     $location.hash(old);};

Answer 2

没有必要改变任何路由或任何其他只需要使用target="_self"创建链接时例子：<a&nbsp;href="#faq-1"&nbsp;target="_self">Question&nbsp;1</a><a&nbsp;href="#faq-2"&nbsp;target="_self">Question&nbsp;2</a><a&nbsp;href="#faq-3"&nbsp;target="_self">Question&nbsp;3</a>并使用id属性中的HTML像这样的元素：<h3&nbsp;id="faq-1">Question&nbsp;1</h3><h3&nbsp;id="faq-2">Question&nbsp;2</h3><h3&nbsp;id="faq-3">Question&nbsp;3</h3>没有必要像注释中所指出的那样使用#；-)