angularjs - 滚动到angularjs

Question

我“显示”后试图滚动到页面上的元素。即我有很长的用户列表，并将它们显示为列表。每个元素都有一个可以单击的编辑图标。单击时，我将显示页面顶部的用户表单。然后，我想滚动到该位置。

  // 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中但被隐藏了，这就是我想要的。当我第一次单击编辑用户时，滚动不起作用。第一次失败后，一切都很好。我不确定发生了什么变化。

我还将表单设置为默认显示，以便我知道它在DOM中，并且在我第一次单击“编辑”时可见。那也没有解决我的问题。因此，无论它是否在DOM中，隐藏到第一个滚动条都不会失败。

知道我在做什么错吗？

编辑:

我想我知道发生了什么，但我不知道如何解决。我在我的应用程序中使用路由。我有类似的路线:

/＃/主要
/＃/管理员

我正在使用滚动到它的我的管理页面导致了问题。这是我要滚动到的html:

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

问题是当我使用 Angular 滚动时，其URL更改为:

/＃/ admin＃admin表单

什么时候是，似乎打了路由 Controller 并重新加载了我的管理页面，这就是为什么滚动不会发生的原因。一旦我进入/＃/ admin＃admin-form网址，滚动就可以了，因为angular看不到我的路线更改，也不会重新加载页面。但是，如果我将网址更改回/＃/ admin并单击执行滚动以再次按 Angular 进行滚动的按钮，则会将该网址更改为/＃/ admin＃admin-form。

我确定这是预期的，但我不知道如何解决。或者如果可以的话。

Answer 1

Angulars路由似乎可以接受更改，在我的情况下这很糟糕，因为scrollTo会将我重新路由回到主管理页面。

滚动然后重置$ location.hash()，以便 Angular 不会感知url的更改似乎起作用。

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

编辑:

如@ theunexpected1在评论中所述，由于 1.4.0，Angular的 $anchorScroll允许您直接将id作为参数传递，而无需使用哈希值更新url:

$scope.scrollTo = function(id) {

  // Pass the 'id' as the parameter here, the page will scroll 
  // to the correct place and the URL will remain intact.
  $anchorScroll(id);
}