【问题标题】:Getting angular ui grid scroll event获取角度ui网格滚动事件
【发布时间】:2015-10-03 12:38:20
【问题描述】:

我正在尝试像这样注册滚动事件(出现新行时收到通知):

 $scope.$on('ngGridEventRows', function (event, rows) {
            console.log("Scroll")
  });

但它不会触发..(角度 ui-grid 版本:v3.0.6)

实现它的正确方法是什么?

【问题讨论】:

    标签: angularjs angular-ui-grid


    【解决方案1】:

    我不确定他们的原生事件,但您可以为他们的滚动事件创建自己的观察者。

    在这个Plunkr 中,我制作了一个滚动播放的观察者。

    $scope.gridOptions.onRegisterApi = function(gridApi){
      $scope.gridApi = gridApi;
      $scope.$watch('gridApi.grid.isScrollingVertically', watchFunc);
      function watchFunc(newData) {
        if(newData === true) {
          $rootScope.$broadcast('scrolled');
        }
      }
    };
    

    还有你的接收者

    app.controller('SecondCtrl', ['$scope', function ($scope){
      $scope.$on('scrolled', function(event, args) {
        console.log('was scrolled');
      });
    }]);
    

    Plunkr 是根据 their Grid Scrolling 教程创建的。

    【讨论】:

    • 谢谢!按预期工作!顺便说一句,您知道在网格中实际显示行列表(总行之外)的方法吗?
    • 现在想不出一个简单的方法。也许他们的 API 提供了类似的东西。问题在于它们的动态视口生成,DOM 一直在变化,您需要计算当前滚动条的位置、视口的总高度和行高或类似的东西。
    • 他们似乎得到了一些东西:github.com/angular-ui/ui-grid/pull/1495ui-grid.info/docs/#/tutorial/210_selection。也许你可以用 selectAllVisibleRows 做点什么。
    • 请注意,这只会在滚动开始时告诉您。对于鼠标滚轮,这意味着每次点击。如果您拖动滚动条,它只会在您第一次移动时触发。如果你需要知道每次滚动位置的变化,你可以检查scrollLeft/scrollTop,或者只是根据观察情况开始/停止一个间隔。
    【解决方案2】:

    如果您想要有关滚动的更准确数据(即实际的滚动事件),您可以改为将网格包装在指令中。我不会在这里包含模板,因为链接配置是关键部分:

    angular.module('my-app').directive('myGrid', function($timeout) {
        return {
          restrict: 'E',
          template: "<div><ui-grid></ui-grid></div>",
          link: function($scope, $element, $attributes) {
            $timeout(function() {
              $('div.ui-grid-viewport').on('scroll', function() {
                // Your event handling here
              });
            });
          }
        };
      });
    

    【讨论】:

    • 没有理由再使用带角度的完整 jquery。应该直接使用 element 参数。
    【解决方案3】:
    $scope.$watch("gridApi.grid.isScrollingHorizontally",function(){
    //your code
    });
    

    【讨论】:

    • 感谢您提供此代码 sn-p,它可能会提供一些有限的短期帮助。一个正确的解释would greatly improve 它的长期价值,通过展示为什么这是一个很好的解决问题的方法,并且会使其对未来有其他类似问题的读者更有用。请编辑您的答案以添加一些解释,包括您所做的假设
    猜你喜欢
    • 2013-09-07
    • 2021-01-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多