Christian Schmitt Christian Schmitt - 4 months ago 43
AngularJS Question

AngularJS Scroll to Bottom after Scope Change/resource Change

Currently I tried to make it with $anchorScroll

But I don't know where to place the

<a id="bottom">


currently my view is a
<table>
and i have a
ng-repeat
on a
<tr>
.
Then I
$watch
for scope changes and apply them to the
ng-repeat
.

html:

<tr ng-repeat="document in documents.items">
<td>{{document.subject}}</td>
<td>{{document.course}}</td>
<td>{{document.bundle}}</td>
<td>{{document.lesson}}</td>
<td>{{document.category}}</td>
<td>{{document.name}}</td>
</tr>


Code in my Controller:

$scope.$watchCollection('search', function (newData, oldData) {
if (newData != null) {
$scope.documents = Document.query(newData)
console.log(newData);
}


Now I tried to put the
$location.hash
and
$anchorScroll
after the
$scope.documents
but nothing ever happend.

Also a Bonus question:
Should I place a paging function to a
directive
or should i make it with
<div ng-click="nextPage()">

Answer

Ok I found out that i just need a setTimeout due to the fact, that i first change the scope and then try to scroll to bottom, but the new scope isn't rendered yet!

EDIT: To Scroll after content get's rendered via ng-repeat: do setTimeout(() => { /* Your scroll stuff here */ }, 0); to

Comments