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(); }); }, 然后开始工作. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |