angularjs ui-grid滚动条到达终点时如何获取事件

Question

我想在角度ui网格v3中滚动条到达结果结尾时显示一个按钮。

我当时的想法是使用指令在滚动上附加一个事件，但是ui grid本身就是一个指令，我无法获得其滚动长度和高度，因为此时未加载数据。

如果有人能给我有关如何解决此问题的提示，我将不胜感激。 谢谢

Answer 1

这不是完整的解决方案，但可能会让您入门。

我附加到scrollEnd事件，并能够检查y位置。 我还没有找到一种方法来计算视口的底部，这就是为什么我只在其中放置了任意2000值的原因。

您可以在https://github.com/angular-ui/ui-grid/blob/a42dab24532fb896725b9fc8359e4526e436c891/src/js/core/factories/Grid.js中检查scrollToIfNecessary以计算网格的实际高度。 绝对不容易计算。

http://plnkr.co/edit/hluhWCZz05WB0Itdumbf?p=preview

   gridApi.core.on.scrollEnd($scope,function(row){

        if( row.newScrollTop > 2000) alert('far down south');

      });

Answer 2

以下内容使您可以检测用户是否一直滚动到网格的右侧和/或底部。 只需插入必要的处理程序即可。 您可以通过将其包装在指令中，然后利用本机滚动事件来实现它。

请注意，我不是JQuery专家，因此肯定有比重复选择器更好的方法。

angular.module('myGridApp')
  .directive('myGrid', function($timeout) {
    return {
      restrict: 'E',
      scope: { data: '=' },
      template: "<div><ui-grid></ui-grid></div>",
      link: function($scope, $element, $attributes) {

        $timeout(function() {
          var maxHorizontalScroll = $('div.ui-grid-viewport')[0].scrollWidth - $('div.ui-grid-viewport')[0].clientWidth;
          var maxVerticalScroll = $('div.ui-grid-viewport')[0].scrollHeight - $('div.ui-grid-viewport')[0].clientHeight;
          $('div.ui-grid-viewport').on('scroll', function(par, arg) {
            var currentHorizontalScroll = $('div.ui-grid-viewport').scrollLeft();
            var currentVerticalScroll = $('div.ui-grid-viewport').scrollTop();

            if(currentHorizontalScroll >= maxHorizontalScroll) {
              // User has scrolled as far to the right as possible
            }

            if(currentVerticalScroll >= maxVerticalScroll) {
              // User has scrolled as far to the bottom as possible
            }
          });
        });
      }
    };
  });