angularjs - 如何阻止 Angular 滚动到顶部

Question

我的页面上有一个 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 上的函数来重新获取数据。

我已经尝试过:

1. 从排序函数返回 false
2. 将其添加到我的模块中以禁用 Angular 的滚动:var ngGrid = angular.module("ngGrid", []).value('$anchorScroll', angular.noop);
3. 设置 min-height在表格上的 css 中以防万一导致它
4. 使用ng-href而不是 anchor 链接中的 href。

Answer 1

找到了。

在我的排序函数中，我不需要返回 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();
        };
    }