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>

谢谢你

135102 次浏览
小开

我不知道这是否回答了你的问题，但是是的，你可以使用 angularjs 链接，比如:

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

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

Http://docs.angularjs.org/api/ng.directive:nghref

更新: AngularJS 文档有点晦涩，没有提供很好的解决方案！

你可以在这里找到一个更好的解决方案: 如何处理 AngularJS 锚散列链接

小开
最佳答案

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

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

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

我选择了选项3，因为它最好依赖于本地浏览器的功能，节省了我们的时间和精力。

必须注意，在一个成功的滚动和散列更改后，Angular 确实跟进和重写散列到其自定义样式。然而，浏览器已经完成了它的业务，你是好去。

小开

你可以尝试使用 锚滚动。

例子

所以控制器应该是:

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>

主持人的身份也不是秘密:

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

或者你可以直接写:

ng-href="\#yourAnchorId"

请注意散列符号前面的反斜杠

小开

对我来说，最好的选择是创建一个指令来做这项工作，因为 $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();
});
}
};
});
小开

如果你正在使用 SharePoint 和棱角，那么按照下面的方法来做:

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

哪里 LinkTo 和 Title 是 SharePoint 列。

小开

我也有同样的问题，但是这对我很有用:

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

$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 函数中) :

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

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

$location.hash('id_in_html');
小开

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

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


提交答案