Question

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

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

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

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

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

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

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

我尝试过使用指令，但结果相同。什么都没有。

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

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

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

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

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

Angular JS没有触发滚动事件

2 个答案: