Question

我正在尝试使用$ anchorScroll向下滚动页面以确保显示一行表格。我已经阅读了大多数关于$ anchorScroll的SO主题和文档。据我所知，我正确使用它。我已经使用Firebug逐步完成了代码，看来我正在使用的元素ID是正确的。

当我执行应该更改滚动位置的功能时，它会更改滚动位置，但它会向上滚动，一直向上移动。我想要滚动到的“目标”元素位于我执行函数的页面的下方。

没有错误消息，它只是没有做我需要的。

这是我使用的简单功能：

$scope.scrollTo = function (elementId) {
        console.log("element[" + angular.element(elementId) + "]");
        $location.hash(elementId);
        $timeout(function() {
            $anchorScroll();
        });
    };

我也尝试更改对此的引用，以便不是定位表行，而是以包围表的accordion div为目标，但这没有任何区别。它仍然只是跳到页面顶部。

请注意，在我调用“scrollTo”之前，我首先要确保打开带有表的手风琴。在任何情况下，即使手动打开它仍然无法正确滚动。

更新

以下是我要尝试滚动到的HTML的一部分：

                <div ng-controller="WorkflowDefsCtrl">
                <pane accordion-group heading="Workflows" is-open="accordionActiveFlags.workflowDefs" id="workflowDefs">
                    <label for="workflowDefsTable">Workflow Definitions</label>
                    <table id="workflowDefsTable" ng-table class="table">
                        <tr ng-repeat="workflowDef in sunlightConfig.workflowDefinitions | orderBy: workflowDef.order" id="workflowDef{{workflowDef.id}}">
                            <td data-title="'ID'">{{workflowDef.id}}</td>
                            <td data-title="'Name'">{{workflowDef.name}}</td>
                            <td data-title="'Label'">{{workflowDef.label}}</td>
                            <td data-title="'Order'" class="text-right">{{workflowDef.order}}</td>
                            <td data-title="'Render?'">{{workflowDef.render}}</td>
                            <td data-title="'Query Fragment'">{{workflowDef.queryFragment}}</td>
                            <td data-title="'Query Order'" class="text-right">{{workflowDef.queryOrder}}</td>
                        </tr>
                    </table>
                </pane>
            </div>

我正在尝试的两个测试用例将转到元素“workflowDefs”和任何“workflowDef {{workflowDef.id}}”元素。

更新

我增强了我的“scrollTo”方法来处理滚动到刚刚可见的元素。然而，这没有任何区别。无论如何，它仍然只是滚动到顶部。

更新

今天我意识到“angular.element”的字符串参数应该是CSS选择器，而不是元素id，所以我不得不添加“＃”作为前缀。这导致找到正确的元素，但不幸的是它仍然对显示没有影响。它仍然不会滚动到元素。

我的新“scrollTo”功能如下所示：

    scrollTo:   function (elementId) {
        $location.hash("#" + elementId);
        $timeout(function() {
            $anchorScroll();
        });
    },

Answer 1

我设法解决了这个问题。我正确地认为$anchorScroll必须在$timeout块中执行，但这还不够。拨打$location.hash()的电话也必须在$timeout block。我将scrollTo功能更改为以下内容后：

    scrollTo:   function (elementId) {
        $timeout(function() {
            $location.hash(elementId);
            $anchorScroll();
        });
    },

然后开始一直工作。

Answer 2

当状态改变时＆amp; $location.hash()不为空，然后在导航页面中滚动到所需的哈希id元素。 $ timeout将确保滚动到哈希id块，在页面正确加载后完成。

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
    if ($location.hash()) {
        $timeout(function() {
            var hashId = $location.hash();
            $anchorScroll();
            document.getElementById(hashId).focus();
        });
    }
 });

使用$ location和$ anchorScroll将表行滚动到视图中

2 个答案: