AngularJS Scroll to Bottom after Scope Change/resource Change

Question

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()">

Christian Schmitt · Accepted Answer · 2016-07-25 14:43:36Z

1

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

edited Jul 25, 2016 at 14:43

answered Dec 5, 2013 at 8:37

Christian Schmitt

92216 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Wottensprels Over a year ago

Instead of using $timeout, which is pretty insecure (consider a slow connnection) you could return a promise, resolve it and only after it has been resolved successfully, do the scroll

Christian Schmitt Over a year ago

no the resource gets loaded and i try to scroll after promise. but since i render the document with ng-repeat i need the setTimeout(function(){}, 0) to scroll after the ng-repeat.

Márton Tamás Over a year ago

@ChristianSchmitt, thanks, the 0ms timeout works perfectly. Yours is the first and only useful solution yet, after searching for about an hour.

Collectives™ on Stack Overflow

AngularJS Scroll to Bottom after Scope Change/resource Change

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related