AnchorScroll后第二次点击只能

问题描述

我相信我遇到这里提到了同样的问题：$anchorScroll和$位置后，才第二次工作尝试

我回顾了工作的plunker，我有路由的地方，但它仍然是采取两次点击。我使用的NG-路线，而不是UI的路由器。我怎样才能prevent它采取两次点击获得anchorScroll工作？作为第一个要引起路由要建立 - 滚动到适当的锚

下面是点击：

 ＆LT;数据-NG-点击=gotoRequests（）＆GT;请求和LT; / A＆GT;
 

下面是目标：

 ＆LT; D​​IV ID =pendingrequests＆GT;＆LT; / DIV＆GT;
 

下面是在我的控制器功能：

  $ scope.gotoRequests =功能（）{
        //将的location.hash设定的ID
        //你要滚动到的元素。
        $的location.hash（'pe​​ndingrequests'）;        //调用$ anchorScroll（）
        $ anchorScroll（）;
    };
 

解决方案

我能在这里使用的答案之一来解决它：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; D​​IV 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后第二次点击只能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！