Prevent angular-ui ui-scroll from loading in hidden div

Question

I have an angular-ui ui-scroll directive (1.3.0) living in a div that is hidden by default with an ng-show. When it is hidden, ui-scroll just keeps loading data from the datasource even though the ui-scroll-viewport's height is set. If the div is shown, it behaves correctly. So, for now my div is 1px wide :/

I'm sure I can solve this with an ng-if to dynamically add this to the DOM. However, I wanted the div to hide/show responsively - so driven off of css.

Any suggestions on how to have ui-scroll only load 1 page from the buffer when hidden? thank you.

Answer 1

You can try to manage it through the datasource implementation:

$scope.datasource.get = function(index, count, success) {
  // prevent data getting while ui-scroll is invisible
  if (!$scope.isScrollerVisible) {
    return; // or let him request for 1 pack and prevent others, any logic
  }
  // get required data and pass it into success callback
  var result = [];
  for (var i = index; i <= index + count - 1; i++) {
    result.push({text: "item #" + i});
  }
  success(result);
}

Also you probably need to initiate scroll reloading once (adapter doc):

$scope.$watch('isScrollerVisible', function(value) {
  if(value) {
    $scope.datasourceAdapter.reload()
  }
});