web-dev-qa-db-ja.com

Scrollイベントがディレクティブ内で発生しない-angular.js

私は問題にこだわっています。 scrollイベントをリッスンする無限スクロールのディレクティブがあります。問題は、$windowにバインドしているときにのみscrollイベントが発生することです。

angular.element($window).bind('scroll', function () {
  console.log('Gogo!'); //works!
});

element.bind('scroll', function () {
  console.log('Gogo!'); //doesn't work... :(((
});

ディレクティブはng-viewの中にあります。この質問を見つけました。私の問題と非常によく似ています- ng-viewの中にあるディレクティブのイベントへのバインドが機能しません

誰もこれを解決する方法を知っていますか？ありがとう！

私の指示：

directives.directive('scrolly', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var raw = element[0];

            element.bind('scroll', function () {
                if (raw.scrollTop + raw.offsetHeight > raw.scrollHeight) {
                    scope.$apply(attrs.scrolly);
                }
            });
        }
    };
});

マイビュー：

<ul class="items-wrap" scrolly="showMore()">
   <li class="item" ng-repeat="item in items">{{item.name}}</li>
</ul>
javascriptangularjseventsjavascript-eventsscroll
20
Kosmetika

ここでフィドルを作成しました： http://jsfiddle.net/ADukg/4831/

おもしろいのは、私があなたの正確なコードを使用したことであり、すべてがうまくトリガーされるようです（すべての散らばったconsole.log()呼び出しを参照）。オーバーフローを正しく使用しないと、スクロールイベントをトリガーできなかったため、問題はCSSスタイリングに関係していると思われます。

13
Matt Way

おそらく、バインドしている要素が「スクロール」しないためです。

実際にスクロールしているノード（ドキュメント、またはスクロールオーバーフローのあるdiv）は、実際にイベントを発生させるものです。

_$document_をディレクティブに挿入し、その上にスクロールイベントを設定してみてください：

$document.bind('scroll', function (){});

また、イベントが適切に発生することが確実になるまで、ハンドラーの内側のifステートメントを捨て、thenを追加し直します。

始めましょう：

_app.directive('scrolly', function ($document) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {

            $document.bind('scroll', function () {
                scope.$apply(attrs.scrolly);
            });
        }
    };
});
_

次に、要素の配置やその他のロジックを調べます。

それがお役に立てば幸いです。

27
Ben Lesh