一尘不染

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

angularjs

我正在尝试使用$ 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();
        });
    },

阅读 190

收藏
2020-07-04

共1个答案

一尘不染

我设法弄清楚了。我正确地假定$anchorScroll必须在代码$timeout块中执行,但这还不够。的呼叫$location.hash()也必须在中$timeout block。一旦我将scrollTo功能更改为以下内容:

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

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

2020-07-04