我正在尝试使用$ 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 block。一旦我将scrollTo功能更改为以下内容:
$anchorScroll
$timeout
$location.hash()
$timeout block
scrollTo
scrollTo: function (elementId) { $timeout(function() { $location.hash(elementId); $anchorScroll(); }); },
然后,它开始一致地工作。