Question

当用户向下滚动浏览器窗口时，我必须显示更多图像。我有为此创建了一个指令。但滚动事件不会被触发。

app.directive('whenScrolled', function() {
  return function(scope, elm, attr) {
    var raw = elm[0];

    elm.bind('scroll', function() {
      if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
        scope.$apply(attr.whenScrolled);
      }
    });
  };
});

在LoadMoreItems中，我将两个新项目推送到列表中：

function LoadMoreItems() {
  $scope.temp = $scope.allItems[$scope.lastCount];

  $scope.items.push({
    Name: $scope.temp.Name,
    Price: $scope.temp.Price,
    StockStatus: $scope.temp.StockStatus,
    Picture: $scope.temp.Picture
  });
  $scope.temp = $scope.allItems[$scope.lastCount + 1];
  $scope.items.push({
    Name: $scope.temp.Name,
    Price: $scope.temp.Price,
    StockStatus: $scope.temp.StockStatus,
    Picture: $scope.temp.Picture
  });

  $scope.lastCount += $scope.count;
}

以下功能会显示该类别的所有特定项目。

function getAllItemss(cat) {
  itemsFactory.getSpecificItems(cat)
    .success(function(_items) {
      $scope.allItems = _items;

      //$scope.items = [];
      $scope.lastCount = 0;

      LoadMoreItems();
    })
    .error(function(error) {
      $scope.status = 'Unable to load items : ' + error.message;
    });
}

HTML：

<div when-Scrolled="LoadMoreItems()"></div>

Answer 1

来自scroll文档：

当用户滚动到a时，scroll事件被发送到元素元素中的不同位置。它适用于window个对象，但也适用可设置overflow CSS属性的可滚动框架和元素当元素的显式高度或宽度较小时，到scroll（或auto 而不是其内容的高度或宽度。）

因此，尝试在scroll上设置div css属性，或将事件侦听器绑定到$window对象（例如$($window).bind('scroll',listener)）并根据它进行计算。

滚动事件未触发

1 个答案: