L'événement Scroll 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 pour l'événement scroll . Le problème est que l'événement de défilement n'est déclenché que lorsque je lié à $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 d'une directive qui se trouve dans une vue ng ne fonctionne pas

Quelqu'un sait comment résoudre cela? 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>

Je vous ai créé un violon ici: http://jsfiddle.net/ADukg/4831/

La chose intéressante est que j'ai utilisé votre code exact, et tout semble déclencher bien (voir tous les appels console.log() ). Je soupçonne que votre problème a bien été avec votre style CSS, car sans l'utilisation correcte du débordement, je ne pouvais pas générer l'événement de défilement.

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

Le noeud que vous défilez réellement (le document, ou peut-être un div avec un débordement de défilement) est ce qui déclenche l'événement.

Essayez d'injecter $document dans votre directive et de configurer l'événement de défilement sur cela:

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

Également, abandonne la déclaration if à l'intérieur du manipulateur jusqu'à ce que vous soyez sûr d'avoir l'événement en train de tirer correctement, puis ajoutez-le.

Juste 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 de l'élément et d'autres logiques.

J'espère que cela vous aidera.