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
Angular提供了一个$anchorScroll
服务,但文档严重缺乏,我一直无法得到它的工作。
查看http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.html了解一些关于;$anchorScroll
。
选项2:自定义指令/原生JavaScript
我testing的另一种方法是创build一个自定义指令,并使用el.scrollIntoView()
。 这基本上在你的指令链接函数中做了以下工作:
var el = document.getElementById(attrs.href); el.scrollIntoView();
但是,当浏览器本身支持这个时候,这样做似乎有点夸张,对吧?
选项3:angular度覆盖/本地浏览器
如果您查看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,所以浏览器根据需要滚动到正确的位置。
我select了3,因为它最好依靠本地浏览器function,并节省了我们的时间和精力。
注意,在成功滚动和散列更改之后,Angular会跟进并重新编写散列到其自定义样式。 但是,浏览器已经完成了业务,你很好。
我不知道这是否回答你的问题,但是,可以使用angularjs链接,例如:
<a ng-href="http://www.gravatar.com/avatar/{{hash}}"/>
AngularJS网站上有一个很好的例子:
http://docs.angularjs.org/api/ng.directive:ngHref
更新:AngularJS文档有点模糊,并没有提供一个很好的解决scheme。 抱歉!
你可以在这里find一个更好的解决scheme: 如何在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。 ( 文件 )
这是最好的解决scheme,因为它根本不影响路线。 我不能得到任何其他解决scheme的工作,因为我使用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>
或者你可以简单地写:
ng-href="\#yourAnchorId"
请注意哈希符号前面的反斜杠
如果你正在使用SharePoint和angular度,那么像下面这样做:
<a ng-href="{{item.LinkTo.Url}}" target="_blank" ng-bind="item.Title;" ></a>
链接和标题是SharePoint列。
对我来说最好的select是创build一个指令来完成这个工作,因为$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');
你只需要添加target =“_ self”到你的链接
恩。 <a href="#services" target="_self">Services</a>
- AngularJS – 指令与控制器
- 使用JavaScript在AngularJS Bootstrap UI中调用模态窗口
- `ui-router` $ stateParams与$ state.params
- 如何用Angular.js实现分页/表格布局?
- ng-class中的angularjsexpression式语法是什么
- AngularJs删除ng-repeat中的重复元素
- 如何获得自定义指令中的评估属性
- 如何将数据作为表单数据而不是请求有效载荷发布?
- AngularJS种子:将JavaScript放入单独的文件(app.js,controllers.js,directives.js,filters.js,services.js)