web-dev-qa-db-fra.com

L'événement de défilement n'est pas déclenché dans la directive - angular.js

Je suis coincé avec un problème. J'ai une directive pour le défilement infini où j'écoute l'événement scroll. Le problème est que l'événement de défilement n'est déclenché que lorsque je me lie à $window:

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

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

La directive est à l'intérieur ng-view J'ai trouvé cette question, ressemble beaucoup à mon problème - La liaison aux événements dans une directive qui est à l'intérieur d'une vue ng ne fonctionne pas

Quelqu'un sait comment résoudre ce problème? Merci!

Ma directive: 

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

Mon avis: 

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

J'ai créé un violon pour vous ici: http://jsfiddle.net/ADukg/4831/

La chose intéressante est que j'ai utilisé votre code exact, et tout semble bien se déclencher (voir tous les appels console.log() jonchés). Je soupçonne que votre problème est lié à votre style CSS, car sans la bonne utilisation du débordement, je n'ai pas pu déclencher l'événement de défilement.

13
Matt Way

C'est probablement parce que l'élément auquel vous vous liez ne "défile" pas.

Le nœud que vous faites défiler (le document, ou peut-être un div avec un débordement de défilement) est la chose qui déclenche réellement l'événement.

Essayez d'injecter $document Dans votre directive et de configurer l'événement de défilement sur celui-ci:

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

En outre, supprimez l'instruction if à l'intérieur du gestionnaire jusqu'à ce que vous soyez sûr que l'événement se déclenche correctement, alors ajoutez-le à nouveau.

Pour commencer:

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

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

Ensuite, travaillez dans votre examen du positionnement des éléments et des autres logiques.

J'espère que ça aide.

27
Ben Lesh