是否可以使用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>
谢谢
答案 0 :(得分:101)
似乎有几种方法可以做到这一点。
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.$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会跟进并将散列重写为其自定义样式。但是,浏览器已经完成了它的业务,你很高兴。
答案 1 :(得分:27)
我不知道这是否能回答你的问题,但是,你可以使用angularjs链接,例如:
<a ng-href="http://www.gravatar.com/avatar/{{hash}}"/>
AngularJS网站上有一个很好的例子:
http://docs.angularjs.org/api/ng.directive:ngHref
更新:AngularJS文档有点模糊,并没有为它提供良好的解决方案。抱歉!
您可以在此处找到更好的解决方案:How to handle anchor hash linking in AngularJS
答案 2 :(得分:20)
您可以尝试使用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>
答案 3 :(得分:7)
$ anchorScroll确实是对此的答案,但在更新的Angular版本中使用它是一种更好的方法。
现在,$ anchorScroll接受哈希作为可选参数,因此您根本不必更改$ location.hash。 (documentation)
这是最好的解决方案,因为它根本不会影响路线。我无法使用任何其他解决方案,因为我使用的是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;
});
答案 4 :(得分:1)
我遇到了同样的问题,但这对我有用:
<a ng-href="javascript:void(0);#tagId"></a>
答案 5 :(得分:1)
适合我:
<a onclick='return false;' href="" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" ng-href="#profile#collapse{{$index}}"> blalba </a>
答案 6 :(得分:1)
你只需要添加target =&#34; _self&#34;到你的链接
离。 <a href="#services" target="_self">Services</a>
答案 7 :(得分:0)
或者你可以写一下:
ng-href="\#yourAnchorId"
请注意哈希符号前面的反斜杠
答案 8 :(得分:0)
对我来说,最好的选择是创建一个指令来完成工作,因为$location.hash()
和
$anchorScroll()
劫持了网址,为我的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();
});
}
};
});
答案 9 :(得分:0)
如果您使用的是SharePoint和angular,请按以下方式执行:
<a ng-href="{{item.LinkTo.Url}}" target="_blank" ng-bind="item.Title;" ></a>
,其中 LinkTo和Title是SharePoint专栏。
答案 10 :(得分:0)
您还可以从控制器内部导航到HTML ID
lqApproved