Angular JSがスクロールイベントを発生しない

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ページをスクロールしてコンソールを開くと、いくつかの出力が表示されます。 $ 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); 
    }); 
})