javascript - 如何在AngularJS中处理锚点哈希链接(How to handle anchor hash linking in AngularJS)

Question

Do any of you know how to nicely handle anchor hash linking in AngularJS ?(你们当中有人知道如何在AngularJS中很好地处理锚点哈希链接吗？)

I have the following markup for a simple FAQ-page(我为简单的常见问题解答页面添加了以下标记) <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> When clicking on any of the above links AngularJS intercepts and routes me to a completely different page (in my case, a 404-page as there are no routes matching the links.)(单击上面的任何链接时，AngularJS会拦截并将我路由到一个完全不同的页面（在我的情况下是404页，因为没有路由与这些链接匹配。）) My first thought was to create a route matching " /faq/:chapter " and in the corresponding controller check $routeParams.chapter after a matching element and then use jQuery to scroll down to it.(我的第一个想法是创建一个匹配“ / faq /：chapter ”的路由，并在匹配的元素后在相应的控制器中检查$routeParams.chapter ，然后使用jQuery向下滚动到它。) But then AngularJS shits on me again and just scrolls to the top of the page anyway.(但是随后AngularJS再次对我大喊大叫，无论如何仍只是滚动到页面顶部。) So, anyone here done anything similar in the past and knows a good solution to it?(那么，这里有人在过去做过类似的事情并且知道解决方案很好吗？) Edit: Switching to html5Mode should solve my problems but we kinda have to support IE8+ anyway so I fear it's not an accepted solution :/(编辑：切换到html5Mode应该可以解决我的问题，但是无论如何我们都必须支持IE8 +，所以我担心这不是一个可以接受的解决方案：/)   ask by Rasmus translate from so

Answer 1

You're looking for $anchorScroll() .(您正在寻找$anchorScroll() 。)

Here's the (crappy) documentation.(这是（糟糕的）文档。) And here's the source.(这是来源。) Basically you just inject it and call it in your controller, and it will scroll you to any element with the id found in $location.hash()(基本上，您只需注入它并在您的控制器中调用它，它将把您滚动到ID在$location.hash()找到的任何元素。) app.controller('TestCtrl', function($scope, $location, $anchorScroll) { $scope.scrollTo = function(id) { $location.hash(id); $anchorScroll(); } }); <a ng-click="scrollTo('foo')">Foo</a> <div id="foo">Here you are</div> Here is a plunker to demonstrate(这是一个演示的朋克) EDIT: to use this with routing(编辑：与路由一起使用) Set up your angular routing as usual, then just add the following code.(像往常一样设置您的角度路由，然后只需添加以下代码。) app.run(function($rootScope, $location, $anchorScroll, $routeParams) { //when the route is changed scroll to the proper element. $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) { $location.hash($routeParams.scrollTo); $anchorScroll(); }); }); and your link would look like this:(并且您的链接如下所示：) <a href="#/test?scrollTo=foo">Test/Foo</a> Here is a Plunker demonstrating scrolling with routing and $anchorScroll(这是一个Plunker，展示了通过路由和$ anchorScroll进行滚动) And even simpler:(甚至更简单：) app.run(function($rootScope, $location, $anchorScroll) { //when the route is changed scroll to the proper element. $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) { if($location.hash()) $anchorScroll(); }); }); and your link would look like this:(并且您的链接如下所示：) <a href="#/test#foo">Test/Foo</a>