滚动到angularjs

我试图滚动到页面上的一个元素,我’显示’之后。 I.E.我有一个很长的用户列表,我显示他们作为一个列表。每个元素都有一个编辑图标,您可以单击。点击我显示页面顶部的用户表单。然后我想滚动到该位置。
// 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,我的’user-form’元素是在DOM但隐藏,这是我想要的。当我点击编辑用户第一次滚动不工作。第一次后,它失败一切都很好。我不知道什么改变。

我也设置表单默认显示,使我知道它是在DOM和可见的第一次我点击编辑。这也没有解决我的问题。所以无论是在DOM还是不是,隐藏或不是第一次滚动失败。

任何想法我做错了什么?

编辑:

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

/#/主要
/#/ admin

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

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

问题是当我使用angular滚动它更改我的URL到:

/#/ admin#admin-form

什么时候是,它似乎命中路由控制器和重新加载我的管理页面,这就是为什么滚动不发生。一旦我在/#/ admin#admin-form url上滚动到工作原因,因为angular没有看到我的路由中的更改,并且不重新加载页面。但是如果我把我的url改回/#/ admin并且点击按钮执行滚动到angular再次更改url到/#/ admin#admin-form。

我相信这是如预期,但我不知道如何解决它。或者如果我可以。

角度路由似乎拾起了变化,在我的情况下是坏的,因为scrollTo重新路由我回到主管理页面

滚动然后重置$ location.hash()所以角度不觉察到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);
}

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...