使用 $location 和 $anchorScroll 将表格行滚动到视图中 [英] Using $location and $anchorScroll to scroll a table row into view

问题描述

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

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

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

这是我使用的简单函数:

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

我还尝试更改对 this 的引用，以便它不针对表格行，而是针对包围表格的手风琴 div，但这没有任何区别.它仍然只是跳转到页面顶部.

注意，在我调用scrollTo"之前，我首先确保打开带有表格的手风琴.无论如何，即使手动打开它仍然无法正确滚动.

更新:

这是我要滚动到的 HTML 的一部分:

 
<窗格手风琴组标题="工作流" is-open="accordionActiveFlags.workflowDefs" id="workflowDefs"><label for="workflowDefsTable">工作流定义</label><table id="workflowDefsTable" ng-table class="table"><tr ng-repeat="sunlightConfig.workflowDefinitions 中的workflowDef | 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></窗格>

我正在尝试的两个测试用例将包含元素workflowDefs"和任何workflowDef{{workflowDef.id}}"元素.

更新:

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

更新:

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

我的新scrollTo"函数如下所示:

 scrollTo: function (elementId) {$location.hash("#" + elementId);$超时(功能(){$anchorScroll();});},

解决方案

我设法解决了这个问题.我正确地假设 $anchorScroll 必须在 $timeout 块中执行，但这还不够.对 $location.hash() 的调用也必须在 $timeout 块 中.一旦我将 scrollTo 函数更改为以下内容:

 scrollTo: function (elementId) {$超时(功能(){$location.hash(elementId);$anchorScroll();});},

然后它开始持续工作.

I'm trying to use $anchorScroll to scroll down the page to ensure that a row of a table is shown. I've read most of the SO threads and docs about $anchorScroll. I'm using it correctly, as far as I can tell. I've stepped through the code with Firebug, and it appears that the element id I'm using is correct.

When I execute the function that should change the scroll location, it does change the scroll location, but it just scrolls up, going all the way to the top. My "target" element that I want to scroll to is further down the page from where I execute the function.

There are no error messages, it just doesn't do what I need.

Here is the simple function that I use:

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

I've also tried changing the reference to this so that instead of targetting a table row, it targets the accordion div that encloses the table, but that made no difference. It still just jumps to the top of the page.

Note that before I call "scrollTo", I first ensure that the accordion with the table is opened. In any case, it still doesn't scroll correctly even after it's manually opened.

Update:

Here's a portion of the HTML that I'm trying to scroll to:

                <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>

The two testcases I'm trying are going to element "workflowDefs" and any of the "workflowDef{{workflowDef.id}}" elements.

Update:

I enhanced my "scrollTo" method to deal with scrolling to elements that had just become visible. This doesn't make any difference, however. It still just scrolls to the top no matter what.

Update:

Today I realized that a string argument to "angular.element" should be a CSS selector, not an element id, so I had to add "#" as a prefix. This resulted in the correct element being located, but unfortunately it still had no effect on the display. It still doesn't scroll to the element.

My new "scrollTo" function looks like this:

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

解决方案

I managed to figure this out. I correctly assumed that $anchorScroll has to be executed in the $timeout block, but that isn't sufficient. The call to $location.hash() also has to be in the $timeout block. Once I changed my scrollTo function to the following:

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

It then started working consistently.

这篇关于使用 $location 和 $anchorScroll 将表格行滚动到视图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！