$route.reload(); Issue

Question

Hi im currenty using $route.reload to refresh the content of my controller Every time I update my Database. the problem is when updating huge list of data, Every Time I update my Database and run $route.reload my browser lose its ability to scroll up or down my browser, it works fine with smaller list of Data.

below is a sample of my code

$scope.Undone = function(id){
    $scope.index =  $scope.GetID ;

    CRUD.put('/UndoJda/'+$scope.index).then(function(response){         
            toastr.info('Jda has been activated.', 'Information');
    $route.reload();
    });
}

Answer 1

Your best bet would be some sort of lazy loading/pagination. So in case it's a really large list, like in the tenths of thousands, it might even be a DOM rendering problem. Also, if that isn't the case, you should try using AngularJS's bind once(Available since 1.3), as well as track by which does not create a watcher for each object on the scope, in your template. Assuming you are using ngRepeat, let's say something like this:

...<ul>
    <li ng-repeat="item in Items">
      <b>{{item.name}}</b>
    </li>
   </ul>

Change that to something like the following, in case the data does not update often:

...<ul>
    <li ng-repeat="item in Items track by $index">
      <b>{{::item.name}}</b>
    </li>
   </ul>

As a side note, try to always have a dot in your model's name. $scope.Something.list, for eaxample. ("If you don't have a dot, you are doing it wrong" - Misko Hevery himself said this.).