Angularjs中的锚链接？

是否可以在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>

谢谢

看来有几种方法可以做到这一点。

选项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="https://stackoverflow.com/ext/link?a=b" target="_self">link</a>

因此，您要做的就是将target属性添加到链接中，如下所示：

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

Angular默认为浏览器，由于它是锚链接而不是其他基本URL，因此浏览器可根据需要滚动到正确的位置。

我之所以选择选项3，是因为它最好地依靠此处的本机浏览器功能，从而节省了我们的时间和精力。

要注意的是，在成功完成滚动和哈希更改之后，Angular会继续跟踪并将哈希重写为其自定义样式。但是，浏览器已经完成其业务，您一切顺利。

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

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

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

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

更新：AngularJS文档有点晦涩难懂，并且没有提供一个很好的解决方案。抱歉!

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

您可以尝试使用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>

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

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

<a ng-href="javascript:void(0);#tagId"></a>

为我工作：

 <a onclick='return false;' href="" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" ng-href="#profile#collapse{{$index}}"> blalba </a>

您只需要在链接中添加target =“ _ self”

例如 <a href="#services" target="_self">Services</a><div id="services"></div>

或者您可以简单地写：

ng-href="\#yourAnchorId"

请注意井号前面的反斜杠

如果您使用的是SharePoint和angular，请按照以下步骤操作：

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

其中“链接到”和“标题”是“ SharePoint列”。

对我而言，最好的选择是创建一个指令来完成工作，因为$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();
      });      
    }
  };
});

您也可以从控制器内部导航到HTML ID

$location.hash('id_in_html');