使用$位置和$ anchorScroll滚动表行进入视野 [英] Using $location and $anchorScroll to scroll a table row into view
问题描述
我试图用$ anchorScroll向下滚动页面，以保证表的行中。我读过大部分SO线程和文档约$ anchorScroll的。我正确地使用它，据我可以告诉。我已经通过了code。与Firebug的台阶状，看来我使用的元素ID是正确的。
当我执行应该改变滚动位置的功能，它改变它的滚动的位置，但它只是滚动起来，一路将顶部。我的目标的元素，我想滚动进一步下跌从我执行该功能的页面。
有没有错误消息，它只是没有做什么，我需要。
下面是我用简单的功能：
$ scope.scrollTo =功能（elementId）{
的console.log（元素[+ angular.element（elementId）+]）;
$的location.hash（elementId）;
$超时（函数（）{
$ anchorScroll（）;
}）;
};
我也试图改变参照本使，而不是打靶表行，它的目标手风琴DIV包围表，但是这并没有区别。它仍然只是跳到页面的顶部。
请注意，在我称之为scrollTo，我首先要确保与表手风琴被打开。在任何情况下，它仍然无法正常滚动即使它的手动打开。
更新：
下面是我试图滚动HTML的一部分：
＆LT; DIV NG控制器=WorkflowDefsCtrl＆GT;
＆LT;面板手风琴组标题=工作流程是开=accordionActiveFlags.workflowDefsID =workflowDefs＆GT;
＆LT;标签=workflowDefsTable＆GT;工作流定义＆LT; /标签＆gt;
＆LT;表ID =workflowDefsTableNG-表类=表＆GT;
＆LT; TR NG重复=workflowDef在sunlightConfig.workflowDefinitions |排序依据：workflowDef.orderID =workflowDef {{workflowDef.id}}＆GT;
＆LT; TD数据标题='ID'＆GT; {{workflowDef.id}}＆LT; / TD＆GT;
＆LT; TD数据标题='名'＆GT; {{workflowDef.name}}＆LT; / TD＆GT;
＆LT; TD数据标题=标签＆GT; {{workflowDef.label}}＆LT; / TD＆GT;
＆LT; TD数据标题='订单'级=TEXT-右＆GT; {{workflowDef.order}}＆LT; / TD＆GT;
＆LT; TD数据标题=？渲染'＆GT; {{workflowDef.render}}＆LT; / TD＆GT;
＆LT; TD数据标题='查询片段'＆GT; {{workflowDef.queryFragment}}＆LT; / TD＆GT;
＆LT; TD数据标题=订单查询阶级=TEXT-右＆GT; {{workflowDef.queryOrder}}＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; /窗格＆GT;
＆LT; / DIV＆GT;
这两个测试用例我试图要去元素workflowDefs与任何workflowDef {{workflowDef.id}}元素。
更新：
我提高了我的scrollTo的方法来处理滚动到刚刚成为可见的元素。这并没有任何区别，但是。它仍然只是滚动顶端不管是什么。
更新：
今天，我意识到，一个字符串参数angular.element应该是一个CSS选择器，而不是元素的ID，所以我不得不添加＃为preFIX。这导致位于正确的元素，但遗憾的是它仍然在显示器上没有任何影响。它仍然不滚动的元素。
我的新scrollTo功能如下：
scrollTo：功能（elementId）{
$的location.hash（＃+ elementId）;
$超时（函数（）{
$ anchorScroll（）;
}）;
}，
我设法想出解决办法。我正确假定$ anchorScroll具有在$超时块要执行，但这是不够的。至$的location.hash（）的调用也必须在$超时块。有一次，我改变了我的scrollTo功能为以下内容：
scrollTo：功能（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.
这篇关于使用$位置和$ anchorScroll滚动表行进入视野的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
