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

Question

你们中有人知道如何在AngularJS中很好地处理锚散列链接吗？

对于一个简单的FAQ页面，我有以下标记

<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页面，因为没有匹配的链接路由。）

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

但是AngularJS又在我身上大便了，而且还是滚动到页面的顶部。

那么，这里有人在过去做过类似的事情，并且知道一个很好的解决方案吗？

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

Answer 1

没有必要改变任何路由或其他任何东西只需要使用目标="_self"当创建链接

示例：

<a href="#faq-1" target="_self">Question 1</a>
<a href="#faq-2" target="_self">Question 2</a>
<a href="#faq-3" target="_self">Question 3</a>

并在html元素中使用id属性，如下所示：

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="faq-3">Question 3</h3>

没有必要使用##指出/在评论中提到；-）

Answer 2

在我的例子中，我注意到如果我修改了$位置，路由逻辑就会启动。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 3

您正在寻找$anchorScroll（）。

这是（糟糕的）文档。

这是来源。

基本上，您只需注入它并在控制器中调用它，它就会将您滚动到$location中id为的任何元素。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>

这里有一个plunker来演示

编辑：将其用于布线

像往常一样设置角度布线，然后添加以下代码。

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();  
  });
});

您的链接如下所示：

<a href="#/test?scrollTo=foo">Test/Foo</a>

这是一个Plunker演示了滚动路由和$anchorScroll

甚至更简单：

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();  
  });
});

您的链接如下所示：

<a href="#/test#foo">Test/Foo</a>