79

是否可以在 Angularjs 中使用锚链接？

IE：

 <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>

谢谢

4

11 回答 11

108

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

选项 1：原生 Angular

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 会跟进并将散列重写为其自定义样式。但是，浏览器已经完成了它的业务，你可以开始了。

于 2013-08-22T06:19:05.290 回答
27

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

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

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

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

更新：AngularJS 文档有点晦涩难懂，并没有为它提供一个好的解决方案。对不起！

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

于 2012-12-26T01:08:10.380 回答
24

您可以尝试使用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>
于 2013-10-18T22:09:31.957 回答
7

$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;
  });
于 2016-01-27T04:25:29.233 回答
1

我有同样的问题，但这对我有用：

<a ng-href="javascript:void(0);#tagId"></a>
于 2015-10-02T18:12:56.973 回答
1

为我工作：

 <a onclick='return false;' href="" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" ng-href="#profile#collapse{{$index}}"> blalba </a>
于 2015-12-09T18:17:48.383 回答
1

您只需将 target="_self" 添加到您的链接

前任。<a href="#services" target="_self">Services</a><div id="services"></div>

于 2017-05-25T20:43:02.237 回答
0

或者你可以简单地写：

ng-href="\#yourAnchorId"

请注意井号前面的反斜杠

于 2014-04-23T09:48:39.967 回答
0

对我来说最好的选择是创建一个指令来完成这项工作，因为$location.hash()劫持 $anchorScroll()URL 会给我的 SPA 路由带来很多问题。

MyModule.directive('myAnchor', function() {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function(scope, elem, attrs, ngModel) {
      return elem.bind('click', function() {
        //other stuff ...
        var el;
        el = document.getElementById(attrs['myAnchor']);
        return el.scrollIntoView();
      });      
    }
  };
});
于 2014-07-16T02:02:35.700 回答
0

如果您使用的是 SharePoint 和 Angular，请执行以下操作：

<a ng-href="{{item.LinkTo.Url}}" target="_blank" ng-bind="item.Title;" ></a>

其中 LinkTo 和 Title 是 SharePoint 列。

于 2015-09-04T11:51:00.343 回答
0

您还可以从控制器内部导航到 HTML id

$location.hash('id_in_html');
于 2017-01-12T15:07:32.843 回答