Angular JS没有触发滚动事件答案

【问题标题】：Angular JS not firing scroll eventAngular JS没有触发滚动事件
【发布时间】：2016-11-08 18:21:33
【问题描述】：

我已经开始使用 Angular 1.5.x 构建我的第一个项目。到现在为止还挺好。

但是，我最近一直在尝试做一些超级简单的事情，并在滚动时记录窗口位置/事件。我尝试了各种方法，例如指令、绑定事件、jquery，但控制台中似乎没有任何记录。

通常在原始 javascript 中，我会做一些简单的事情，例如：

window.onscroll = function (e) {
    console.log(e);
}

我已经尝试更新代码，使其在我的控制器中看起来像这样：

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

它什么都不做。如果我将事件更改为单击或调整大小，它会响应。但是滚动什么也没做。这真是令人沮丧。

我尝试过使用指令并且得到了相同的结果。什么都没有。

Angular 似乎移除了滚动事件或以某种方式覆盖它。我希望有一个明显的解决方案，或者只是我需要做的另一个属性或方法。

非常感谢您花时间研究我的问题。

我非常感谢任何人提供的任何帮助和建议。

【问题讨论】：

你试过用.bind代替.on吗？
是的，我有。似乎什么也没做。
如果我将事件更改为其他任何内容，例如“点击”。有用。似乎“滚动”根本没有响应。真的很奇怪。
我尝试了您的确切代码，它对我来说效果很好。您是否正确注入了 $window？
让我知道我下面的回复是否有帮助。如果需要，希望对其进行改进。

标签： javascript angularjs events scroll

【解决方案1】：

看看这里http://plnkr.co/edit/FL06BgnmOpgVXNecB3mB?p=preview。滚动浏览 HTML 页面并打开控制台，您将看到正在打印的一些输出。注意在 script.js 中 $window 是一个依赖注入。

app.directive("scroll", function ($window) {
  return function(scope, element, attrs) {
    angular.element($window).bind("scroll", function(e) {
      console.log(e);
      console.log(this.pageYOffset);
      scope.$apply();
    });
  };
});

【讨论】：

嗨@zee，感谢您帮助我。我已经在 plunker 上尝试了你的示例并且它有效。但是，当我将它传输到我的应用程序时，它不会触发滚动事件。我只能认为我的代码中有一些冲突。但我不确定是什么。我觉得奇怪的是，当我将“滚动”切换为“点击”时，它会触发该事件，但不会滚动。
经过更多修改。我终于有反应了。我给了一个元素一个 5000px 的硬编码 css 高度值，它现在正在记录事件。所以看起来角度没有得到窗口高度。我猜这与使用动态模板/路由有关，它在页面高度之前绑定了滚动事件？我想知道这是一个错误还是典型的角度？
天哪，我太傻了。我的 CSS 中有高度为 100% 的 body 标签。所以我假设我的 JS 会认为没有必要滚动。希望这可以帮助其他人，如果他们遇到类似的问题。再次感谢@zee 和其他所有花时间提供帮助的人。

【解决方案2】：

如果你想在控制器中使用，可以这样：

Plnkr example

app = angular.module('app', [])
  .controller('scrollCtrl', function($scope, $document, $window) {
  ctrl = this;
  ctrl.pos = 0;

  //Scroll function
  ctrl.onScroll = function() {
    $scope.$apply(function(){
      ctrl.pos = $window.scrollY;
    });
  }

  //Bind current this to function
  ctrl.onScroll = ctrl.onScroll.bind(ctrl);

  //Event
  $document.on('scroll', ctrl.onScroll);

  //Easy to unsubscribe from event:
  $scope.on('destroy', function() {
    $document.off('scroll', ctrl.onScroll);
  });
})

【讨论】：