angularjs - 使用 $location 和 $anchorScroll 将表行滚动到 View 中

Question

我正在尝试使用 $anchorScroll 向下滚动页面以确保显示表格的一行。我已经阅读了关于 $anchorScroll 的大部分 SO 线程和文档。据我所知，我正在正确使用它。我已经使用 Firebug 单步调试了代​​码，看来我使用的元素 id 是正确的。

当我执行应该更改滚动位置的函数时，它确实更改了滚动位置，但它只是向上滚动，一直滚动到顶部。我想要滚动到的“目标”元素位于执行该函数的页面的更下方。

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

这是我使用的简单函数:

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

我还尝试更改对此的引用，以便它不是以表行为目标，而是以包围表的折叠式 div 为目标，但这没有什么区别。它仍然只是跳转到页面顶部。

请注意，在调用“scrollTo”之前，我首先确保带有表格的 Accordion 已打开。无论如何，即使手动打开后，它仍然无法正确滚动。

更新:

这是我尝试滚动到的 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 block 中执行，但这还不够。对 $location.hash() 的调用也必须位于 $timeout block 中。一旦我将 scrollTo 函数更改为以下内容:

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

然后它开始持续工作。