Question

当滚动条以角度ui网格v3到达结果的末尾时，我想显示一个按钮。

我在想的是在scroll使用指令附加一个事件，但是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
            }
          });
        });
      }
    };
  });

当angularjs ui-grid滚动条到达结尾时，如何获得事件

2 个答案: