Angularjs的锚点链接？

Question

是否可以使用Angularjs的锚链接？

即:

 <a href="#top">Top</a>
 <a href="#middle">Middle</a>
 <a href="#bottom">Bottom</a>

 <div name="top"></div>
 ...
 <div name="middle"></div>
 ...
 <div name="bottom"></div>

谢谢

Answer 1

似乎有几种方法可以做到这一点.

选项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:角度覆盖/本机浏览器

如果您查看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会跟进并将散列重写为其自定义样式.但是,浏览器已经完成了它的业务,你很高兴.

Answer 2

我不知道这是否能回答你的问题,但是,你可以使用angularjs链接,例如:

<a ng-href="http://www.gravatar.com/avatar/{{hash}}"/>

AngularJS网站上有一个很好的例子:

http://docs.angularjs.org/api/ng.directive:ngHref

更新:AngularJS文档有点模糊,它没有提供一个很好的解决方案.抱歉!

您可以在此处找到更好的解决方案:如何在AngularJS中处理锚点哈希链接

Answer 3

您可以尝试使用anchorScroll.

例

所以控制器将是:

app.controller('MainCtrl', function($scope, $location, $anchorScroll, $routeParams) {
  $scope.scrollTo = function(id) {
     $location.hash(id);
     $anchorScroll();
  }
});

并且观点:

<a href="" ng-click="scrollTo('foo')">Scroll to #foo</a>

...并且对于锚id没有秘密:

<div id="foo">
  This is #foo
</div>

Answer 4

$ anchorScroll确实是答案,但是在更新的Angular版本中有更好的方法.

现在,$ anchorScroll接受散列作为可选参数,因此您根本不必更改$ location.hash.(文件)

这是最好的解决方案,因为它根本不会影响路线.我无法使用任何其他解决方案,因为我正在使用ngRoute,并且路由会在我设置$location.hash(id)之后立即重新加载,之后$ anchorScroll可以发挥其魔力.

以下是如何使用它...首先,在指令或控制器中:

$scope.scrollTo = function (id) {
  $anchorScroll(id);  
}

然后在视图中:

<a href="" ng-click="scrollTo(id)">Text</a>

此外,如果您需要考虑固定的导航栏(或其他UI),您可以像这样设置$ anchorScroll的偏移量(在主模块的运行功能中):

  .run(function ($anchorScroll) {
      //this will make anchorScroll scroll to the div minus 50px
      $anchorScroll.yOffset = 50;
  });