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

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();
        });
    },

然后它开始一直工作.