scroll to a list-item after angular has rendered the element

Question

I want to scroll to the last message in the chat box. So I am doing it as -

akiRepair.controller("chatCtrl", ['$scope', function($scope){
...
    var size = $scope.messages.length;
    var t = document.querySelector("#chat-box");
      console.log(t);
      var elt = angular.element(t.querySelector("md-list-item")[size-1]);

      angular.element("#chat-box").animate({scrollTop: elt.offset().top}, "slow");

Now before ng-repeat completes is rendering the controller code is run, which I don't want. is there any way to suspend "scroll to" function until everything is rendered properly.

HTML CODE -

<md-list layout-padding id="chat-box">
      <md-list-item class="md-3-line" ng-repeat="message in messages">
          <i class="md-avatar material-icons"
          ng-if="message.sender">face</i>
          <div class="md-list-item-text"
          ng-class="message.sender?'left-align':'right-align'">
            <h3>{{message.what}}</h3>
            <h4 class="faded">{{message.whence | date: 'yyyy:mm:dd hh:mm:ss'}}</h4>
          </div>
          <i class="md-avatar material-icons"
          ng-if="!message.sender">face</i>
          <md-divider ng-if="!$last"></md-divider>
      </md-list-item>

Thanks

lex82 · Accepted Answer · 2015-12-11 14:31:18Z

3

You can just use a timeout:

setTimeout(function() {
    // Your delayed code goes here
});

Without specifying a delay as a second parameter, the passed function will be called immediately after the curren thread of execution that finishes with rendering of the page.

You can also use the $timeout service offered by angular (a wrapper around setTimeout) but it does not give you any benefits here. It only triggers another digest cycle that is not necessary.

answered Dec 11, 2015 at 14:31

lex82

11.4k2 gold badges48 silver badges72 bronze badges

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

2 Comments

codeomnitrix Over a year ago

Great that worked, however the animate function is not working, can you please suggest something for that also

Martin Over a year ago

About your comment that $timeout is not necessary here, true, but it helps for testing since you can pretty easily mock it.

ARIF MAHMUD RANA · Accepted Answer · 2015-12-11 14:39:27Z

1

You can add a custom directive to your ng-repeat portion like this & add scroll option to that directive like this

<md-list-item class="md-3-line" ng-repeat="message in messages" my-repeat-directive>
    <i class="md-avatar material-icons"
       ng-if="message.sender">face</i>
    <div class="md-list-item-text"
         ng-class="message.sender?'left-align':'right-align'">
        <h3>{{message.what}}</h3>
        <h4 class="faded">{{message.whence | date: 'yyyy:mm:dd hh:mm:ss'}}</h4>
    </div>
    <i class="md-avatar material-icons"
       ng-if="!message.sender">face</i>
    <md-divider ng-if="!$last"></md-divider>
</md-list-item>

akiRepair.directive('myRepeatDirective', function() {
    return function(scope, element, attrs) {
        if (scope.$last) {
            angular.element("#chat-box").animate({scrollTop: elt.offset().top}, "slow");
        }
    };
})

answered Dec 11, 2015 at 14:39

ARIF MAHMUD RANA

5,1963 gold badges39 silver badges58 bronze badges

3 Comments

codeomnitrix Over a year ago

yeah I tried it, it worked. However the animate function is not working, can you please help me how to do a scroll to animation with angular js

codeomnitrix Over a year ago

nope I don't have jquery only angularjs and other angular support libs

ARIF MAHMUD RANA Over a year ago

@codeomnitrix you can check this article coderwall.com/p/hujlhg/smooth-scrolling-without-jquery but I suggest you use jQuery as it will save a lot of time for situations like this.

Collectives™ on Stack Overflow

scroll to a list-item after angular has rendered the element

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related