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

Question

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

当我执行应更改滚动位置的功能时，它确实会更改滚动位置，但它只是向上滚动，一直到顶部。我要滚动到的“目标”元素在执行功能的页面下方。

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

这是我使用的简单函数：

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

我还尝试过更改对此的引用，以便它不是针对表格行，而是针对封装表格的手风琴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();
        });
    },

然后，它开始一致地工作。