angularjs - 防止 angular-ui ui-scroll 在隐藏的 div 中加载

Question

我有一个 angular-ui ui-scroll 指令（1.3.0）住在一个 div 中，默认情况下使用 ng-show 隐藏。当它被隐藏时，即使设置了 ui-scroll-viewport 的高度，ui-scroll 也会继续从数据源加载数据。如果显示了 div，则它的行为正确。所以，现在我的 div 是 1px 宽：/

我确信我可以使用 ng-if 将其动态添加到 DOM 来解决这个问题。但是，我希望 div 能够响应地隐藏/显示 - 所以从 css 中删除。

关于如何让 ui-scroll 在隐藏时仅从缓冲区加载 1 页的任何建议？谢谢你。

Answer 1

您可以尝试通过数据源实现来管理它：

$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);
}

此外，您可能需要启动一次滚动重新加载（适配器文档）：

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