AnchorScroll后第二次点击只能 [英] AnchorScroll only works after second click
问题描述
我相信我遇到这里提到了同样的问题:<一href=\"http://stackoverflow.com/questions/29526187/anchorscroll-and-location-only-work-after-second-try\">$anchorScroll和$位置后,才第二次工作尝试
我回顾了工作的plunker,我有路由的地方,但它仍然是采取两次点击。我使用的NG-路线,而不是UI的路由器。我怎样才能prevent它采取两次点击获得anchorScroll工作?作为第一个要引起路由要建立 - 滚动到适当的锚
下面是点击:
&LT;数据-NG-点击=gotoRequests()&GT;请求和LT; / A&GT;
下面是目标:
&LT; DIV ID =pendingrequests&GT;&LT; / DIV&GT;
下面是在我的控制器功能:
$ scope.gotoRequests =功能(){
//将的location.hash设定的ID
//你要滚动到的元素。
$的location.hash('pendingrequests'); //调用$ anchorScroll()
$ anchorScroll();
};
我能在这里使用的答案之一来解决它:<一href=\"http://stackoverflow.com/questions/14712223/how-to-handle-anchor-hash-linking-in-angularjs\">How处理锚链接哈希在AngularJS
通过创建以下功能:
$ scope.scrollTo =功能(ID){
VAR老= $的location.hash();
$的location.hash(ID);
$ anchorScroll();
//重新设置到老,保持任何额外的路由逻辑在踢
$的location.hash(旧);
};
如下我称之为:
&LT; A HREF =数据-NG-点击=scrollTo('pendingrequests')&GT; Yipee&LT; / A&GT;&LT; DIV ID =pendingrequests&GT;&LT; / DIV&GT;
I believe I am experiencing the same issue mentioned here: $anchorScroll and $location only work after second try
I reviewed the plunker that works and I have routing in place, but it is still taking two clicks. I am using ng-route and not ui-router. How can I prevent it taking two clicks to get anchorScroll to work? As the first wants to cause a route to be established versus scrolling to the appropriate anchor.
Here is the click:
<a data-ng-click="gotoRequests()">Requests</a>
Here is the destination:
<div id="pendingrequests"></div>
Here is the function in my controller:
$scope.gotoRequests = function() {
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('pendingrequests');
// call $anchorScroll()
$anchorScroll();
};
I was able to solve it using one of the answers here: How to handle anchor hash linking in AngularJS
by creating the following function:
$scope.scrollTo = function(id) {
var old = $location.hash();
$location.hash(id);
$anchorScroll();
//reset to old to keep any additional routing logic from kicking in
$location.hash(old);
};
I would call this as follows:
<a href="" data-ng-click="scrollTo('pendingrequests')">Yipee</a>
<div id="pendingrequests"></div>
这篇关于AnchorScroll后第二次点击只能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!