使用 $scope.$on 在 AngularJS 中滚动事件答案

【问题标题】：Scroll event in AngularJS using $scope.$on使用 $scope.$on 在 AngularJS 中滚动事件
【发布时间】：2018-01-02 15:17:35
【问题描述】：

有没有办法在控制器内捕捉页面滚动事件？我在组件的控制器 $onInit 上有这个：

$scope.$on('scroll', function() {
        console.log('Something something');
      });

我只见过在指令上使用 .bind() 的方法，例如：Scroll event in AngularJS

我一直在潜伏官方指南，一无所获。

【问题讨论】：

标签： javascript angularjs performance events

【解决方案1】：

您可以向链接到的指令添加一个属性，以便在发生滚动时从控制器中调用一个函数

.directive("scroll", function () {
return {
  restrict: 'A',
  scope : {
         "onScroll" : "&onScroll"
  },
  link: function(scope, element, attrs) {
      element.bind("wheel", function() {
         scope.onScroll();
      });
  }
}
});

然后在您的模板中，您将在属性值中传递它

<ul scroll on-scroll="myController.onScroll()">
</ul>

【讨论】：

经过一番调查，我发现在指令之外无法捕获此事件。这也有效：link: function(scope, element, attrs) { var theElementWithScroll = element[0]; theElementWithScroll.addEventListener('scroll', function() { scope.onScroll(); });

【解决方案2】：

您可以使用 angularJS 的 $element 来正确执行此操作。

angular.element($element).on('scroll', function() {
  console.log('Something something');
});

在控制器中，$element 是控制器绑定到的 DOM 中的元素。

【讨论】：