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