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

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

我设法弄清楚了.我正确地假设$anchorScroll必须在$timeout块中执行,但这还不够. $location.hash()的调用也必须在$timeout块中.一旦我将“scrollTo”功能更改为以下内容：

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

然后开始工作.

原文链接：https://www.f2er.com/angularjs/142351.html

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

猜你在找的Angularjs相关文章