Scroll to bottom of page after get request AngularJs

Question

I'm familiar with using something like:

$scope.gotoBottom = function(){
    $location.hash('bottom');
    $anchorScroll();
}

and this works.. yet what I'm seeing is an issue when retrieving data that's being used in an ng-repeat and attempting to resize when that data comes in.

Example (in controller):

users.get({userList:$routeParams.conversationId}, function(data){
        $scope.userList = data;
        $scope.gotoBottom();
})

The gotoBottom method is firing to fast, while the ng-repeat is looking on $scope.userList and buidling it's table based off that.

I want to be able to toggle gotoBottom after that list has been remade (or whenever it's modified). Is there a better way to achieve this?

Thank you!

score 3 · Accepted Answer · answered Feb 04 '14 at 19:47

You can use $watch listener to fire gotoBotton when an AngularJs variable change.

$scope.ActivityList = new Array();

$scope.$watch("ActivityList", function () {
    $scope.$evalAsync(function () {
        $scope.DoSomething();
    });
}, true);

$scope.DoSomething = function () {
    $(function () {
        //$scope.gotoBottom();
    });
};

score 1 · Answer 2 · answered Sep 08 '15 at 14:20

Also you can run scrolling bottom after page is loaded

angular.element($window).bind('load', 
  function() {
  var element = document.getElementById("messages-list").lastElementChild;
    element.id = "bottom";
    /*-------------*/
    $location.hash('bottom');
    $anchorScroll();      
}

Scroll to bottom of page after get request AngularJs

2 Answers2