Angular JS不会触发滚动事件

我已经开始用Angular 1.5.x构建我的第一个项目。到现在为止还挺好。Angular JS不会触发滚动事件

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

通常以原始的JavaScript我会做一些简单的如：

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

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

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

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

我试过使用指令，我已经有了相同的结果。没有。

Angular似乎删除滚动事件或在某种程度上覆盖它。我希望有一个明显的解决方案或者我需要做的另一个属性或方法。

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

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

来源

2016-11-08 Liam Chapman

你尝试过使用'.bind'，而不是'.on'？ – Lifehack

是的，我有。似乎没有做任何事情。 –

如果我将事件更改为其他任何内容，如“点击”。有用。看起来'滚动'根本没有响应。真奇怪。 –

看看这里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(); 
    }); 
    }; 
});

来源

2016-11-08 19:04:12 zee

嗨@zee，谢谢你帮助我。我试过你的例子，它的工作原理。但是，当我将其传输到我的应用程序时，它不会触发滚动事件。我只能认为在我的代码中存在一些冲突。但我不确定是什么。我觉得奇怪的是，当我切换“滚动”到“点击”时，它会触发该事件，但不会滚动。 –

后更多的修补程序。我终于有了回应。我给了一个硬编码的css height值为5000px的元素，现在它正在记录事件。所以看起来角度没有达到窗口高度。我猜这是使用动态模板/路线的事情，它在页面高度有限之前绑定滚动事件？我不知道这是一个错误还是角度典型？ –

哦，我很傻。我的身体标记在我的CSS中的高度为100％。所以我假设我的JS会认为没有必要滚动。希望这可以帮助别人解决类似的问题。再次感谢@zee和其他花时间帮助的人。 –

如果你想在控制器的使用有可能是这样的：

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

来源

2017-02-13 15:41:59

Angular JS不会触发滚动事件

回答

相关问题