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

你可以试着用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 2

我不知道这是否回答了您的问题，但是的，您可以使用angularjs链接，例如：

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

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

更新：AngularJS留档有点模糊，它没有提供一个好的解决方案。抱歉！

您可以在这里找到更好的解决方案：如何在AngularJS中处理锚散列链接

Answer 3

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

Angular提供了一个$anchorScroll服务，但是留档严重不足，我无法让它工作。

退房http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.html 了解$anchorScroll。

我测试的另一种方法是创建自定义指令并使用el。scrollIntoView（）。通过在指令链接函数中基本上执行以下操作，这项工作相当正常：

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

然而，当浏览器本机支持这两种功能时，这两种功能似乎都有点言过其实，对吗？

如果您查看http://docs.angularjs.org/guide/dev_guide.services.位置及其超文本标记语言链接重写部分，您将看到以下链接不会重写：

包含目标元素的链接

示例：

因此，您只需将target属性添加到链接中，如下所示：

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

Angular默认为浏览器，由于它是一个锚链接，而不是不同的基本网址，浏览器会根据需要滚动到正确的位置。

我选择了选项3，因为这里最好依赖本机浏览器功能，这样可以节省我们的时间和精力。

需要注意的是，在一次成功的滚动和散列更改之后，Angular会继续并将散列重写为其自定义样式。然而，浏览器已经完成了它的业务，您可以开始了。