AngularJs ui-scroll reload not working

Question

In one of our angular application, we are using ui-scroll directive for lazy-loading. I have created a adapter and assigned to the ui-scroll directive. I need to reload the entire data by making API request and refresh data.

From ui-scroll docs, we can see reload() method available for adapter which we are assigning to directive.

$scope.listAdapter = {adapter:{remain:true}};

We are passing this adapter to custom datasource and which in turn is assigned to the ui-scroll repeater.

When user clicks on a button, i need to reload the entire result by pulling latest results from API. So i tried by adding,

$scope.listAdapter.reload();

When i tried call reload method, it throws exception stating method not found. TypeError: $scope.listAdapter.reload is not a function

Also i tried by re-assigning datasource and passing empty adapter to the scope variable, but no luck.

If anyone has fixed this, please let me know what need to be done.

Answer 1

Try to define adapter as an empty object: $scope.listAdapter = {};

Answer 2

There are two possible kinds of problem I see.

1. Wrong scope assignment. It needs to be taken into the account that the ui-scroll directive injects the declaratively defined properties into the target scope with the help of AngularJS $parse service. It could make the assignment nontrivial. For more details follow the documentation. Here the best practice is to use "Controller As" syntax.

2. Call too early. You should not try to execute Adapter.reload() (and other Adapter methods) before the ui-scroll is initialized, because the ui-scroll injects the Adapter object into the target scope during directive's linking proccess which is not immediate. To protect the Adapter methods execution you may use following approach:

   $scope.doReload = function () {
   if (angular.isFunction($scope.adapter.reload)) {
       $scope.adapter.reload(reloadIndex);
     }
   };
   

Answer 3

I am also facing the same issue. My issue resolved after two-level object hierarchy. Please notice that properties defined via assignable expression could be unavailable. Define at least two-level object hierarchy on your controller:

In HTML

<div ng-controller="MyController">
  <div ng-if="show">
    <div ui-scroll="item in datasource" adapter="container.adapter">
    </div>
  </div>
</div>


In Controller
.controller('MyController', function($scope) {
  $scope.container = { adapter: {} };
}