滚动到angularjs [英] Scroll to in angularjs

问题描述

我想后，我'显示'它滚动到页面上的元素。 I.E.我有一个很长的用户列表，我显示它们的列表。每一个元素都有一个编辑图标可以点击。在点击我向用户显示形式在页面的顶部。那么我想滚动到该位置。

I am trying to scroll to an element on the page after I 'show' it. I.E. i have a very long list of users and I display them as a list. Each element has an edit icon you can click. On click I show the user form which is at the top of the page. I then want to scroll to that location.

  // helper method to scroll
  $scope.scrollTo = function (id) {
    $location.hash(id);
    $anchorScroll();
  }

在编辑用户点击：

  $scope.editUser = function (user) {
    $scope.user = user; // set user
    $scope.setShowUserForm(true); // show edit form
    $scope.scrollTo('admin-form'); // scroll to the form
  }

本工程除第一次大。我检查了DOM和我的'用户表'元素是DOM，但隐藏的，这就是我想要的。当我在编辑用户点击一次的滚动不起作用。后的第一次失败了，一切都很好。我不知道发生了什么变化。

This works great except for the first time. I checked the DOM and my 'user-form' element is in the DOM but hidden, which is what I want. When I click on an edit user the first time the scroll does not work. After the first time it fails everything is fine. I am not sure what changed.

我还设置了形式，默认显示这样的，我知道这是在DOM和可见我第一次点击编辑。这并没有任何解决我的问题。因此，无论其在DOM与否，隐藏或不是第一次滚动到失败。

I also set the form to show by default such that I knew it was in the DOM and visible the first time I click edit. That did not solve my problem either. So whether its in the DOM or not, hidden or not the first scroll to fails.

任何想法，我做错了？

编辑：

我想我知道是怎么回事，但我不知道如何解决它。我用我的应用程序的路由。我有这样的路线：

I think I know what is going on but I have no idea how to solve it. I am using routing in my application. I have routes like:

/＃/主
/＃/管理员

/#/main /#/admin

这是我使用的滚动到导致的问题它我的管理页面。这里是我想滚动到HTML：

Its my admin page that I am using the scroll to that is causing problems. Here is the html I want to scroll to:

<div id="admin-form">
...
</div>

问题是，当我使用的角度滚动它改变了我的网址为：

The problem is when I use angular to scroll it changes my url to:

/＃/＃管理员管理形式

/#/admin#admin-form

在做，它似乎击中路由控制器和重装我的管理页面这就是为什么滚动不会发生。一次我上/＃/＃管理员管理形式的URL滚动到的作品，因为角度不看在我的路线更改，并不会重新加载页面。但是，如果我改变我的URL回到/＃/ admin和单击执行滚动到角再次改变链接直接/＃/＃管理员管理形式。

When is does that it seems to hit the route controller and reload my admin page which is why the scroll does not happen. once I am on the /#/admin#admin-form url the scroll to works because angular does not see a change in my route and does not reload the page. But if I change my url back to /#/admin and click the button that performs the scroll to angular again changes the url to /#/admin#admin-form.

我相信这是预料之中的，但我不知道如何解决它。或者，如果我能。

I am sure this is as expected but I have no idea how to fix it. Or if I can.

推荐答案

Angulars路由似乎拿起变化，这在我的情况是不好的，因为scrollTo重新路由我回到主管理页面。

Angulars routing seems to pick up the change, which in my case is bad because the scrollTo reroutes me to back to the main admin page.

滚动，然后重置$的location.hash（），因此在角URL似乎工作不察觉的变化。

Scrolling and then resetting the $location.hash() so angular does not perceive a change in url seems to work.

 $scope.scrollTo = function (id) {
    var old = $location.hash();
    $location.hash(id);
    $anchorScroll();
    $location.hash(old);
  }

这篇关于滚动到angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！