我的页面上有一个 Angular 驱动的表格,可以排序。当我单击某列来更改排序时,它会发出 $http 请求以获取新数据并重新应用它。一切运行良好,但令人烦恼的是,它会将页面滚动到顶部。
我的排序链接由指令呈现:<a ng-click='sort()' href='#' ng-transclude></a>
我的排序处理程序也在指令中定义:
link: function (scope, el, attrs) {
scope.sort = function () {
// Want to check the pagerInfo of the controller
scope.$parent.onsort(scope.sortby, sortDir);
return false;
};
}
这只是调用 Controller 上的函数来重新获取数据。
我已经尝试过:
- 从排序函数返回 false
- 将其添加到我的模块中以禁用 Angular 的滚动:
var ngGrid = angular.module("ngGrid", []).value('$anchorScroll', angular.noop);
- 设置
min-height
在表格上的 css 中以防万一导致它 - 使用
ng-href
而不是 anchor 链接中的 href。
最佳答案
找到了。
在我的排序函数中,我不需要返回 false,而是需要 event.preventDefault();
完整功能:
link: function (scope, el, attrs) {
scope.sort = function () {
// Want to check the pagerInfo of the controller
var sortDir = "desc";
if (scope.$parent.pagerInfo.sortby == scope.sortby) {
sortDir = scope.$parent.pagerInfo.sortdir == "asc" ? "desc" : "asc";
}
scope.$parent.onsort(scope.sortby, sortDir);
event.preventDefault();
};
}
关于angularjs - 如何阻止 Angular 滚动到顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19562960/