web-dev-qa-db-fra.com

ngInfiniteScroll - La méthode loadMore () est appelée à chaque défilement de la souris.

Solution ci-dessous sur les commentaires.

Problème: Ma méthode loadMore () est exécutée sur le défilement de chaque conteneur.

Signification: loadMore () est exécuté à chaque défilement du conteneur parent (infinite-scroll-parent="true").

Résultat souhaité: pour que loadMore () ne soit exécuté que lorsque infiniteScrollDistance remplit ses conditions, au lieu de tout défilement minuscule que je fais.

Mon code est fortement inspiré par le demo_basic & demo_async . 

Mon application est une galerie de photos. Je charge les photos par appel ajax et les renseigne dans un répéteur de directives miniature. Je désactive ng-Infinite-Scroll à l’initialisation du contrôleur et l’active en cas de rappel.

    <div class="thumbnails grid__item page--content">
            <div id="gallery" class="unstyled-list" 
                    infinite-scroll='loadMore()' 
                    infinite-scroll-disabled='album.busy' 
                    infinite-scroll-parent="true" 
                    infinite-scroll-immediate-check="false" 
                    infinite-scroll-distance='2'>
                    <my-photo-directive ng-repeat="photo in photos"></my-photo-directive>
            </div>
    </div>

Mon code café n'a pas de surprises. C'est une logique sans importance, car si je place un simple console.log, le problème persiste .....

    $scope.album.busy = true
    $scope.loadMore = ->
            $scope.$apply ->
                    $scope.album.busy = true
            console.log('loadMore() been executed here')

Ma directive sur les vignettes est la même. Pas de surprises, au moment où les dernières photos sont remplies sur le répéteur, j'active le composant.

    app.directive 'myPhotoDirective', ['$window', ($window) ->
        return {} =
            ....
            link: (scope, element, attrs) ->
                if scope.$last
                    scope.album.busy = false

Je n'ai aucune idée de ce qui me manque ou de ce qui ne va pas ... J'espère que quelqu'un sera là pour m'aider.

Je vous remercie.

angularjsnginfinitescroll
20
neoswf

J'ai résolu mon problème.

Une des propriétés de base que NIS (ngInfiniteScroll) mesure, est $containeret $elem

  1. $container est le parent des éléments déroulés Element.
  2. $elem est l'élément qui contient les éléments défilés.

Exemple

<$container> <!-- can be a div -->
    <$elem> <!-- can be a list -->
        <photo/>
        <photo/>
        <photo/>
        <photo/>
    </$elem>
</$container>

Ce que NIS essaie de faire est de calculer sur chaque défilement de souris, si activé, la relation entre ces deux éléments, et de vérifier si $elem est supérieur à $container, puis de faire défiler vers le bas ou non. (Il vérifie également d'autres propriétés telles que - distance, vérification immédiate et désactivée).

Donc, cette relation entre ces deux éléments fondamentaux est cruciale pour la compréhension et le débogage des NEI. 

Donc, mon problème était exactement que - $ conteneur et $ elem étaient égaux à leur hauteur.
J'avais corrigé les valeurs de hauteur css (100%) sur les deux éléments (principalement parce que je lisais dans la documentation que je devais passer la hauteur), et par erreur, j'avais corrigé $elem qui était totalement faux. 

Deuxièmement -infinite-scroll-distancepeut aussi causer cela . Si la valeur que vous définissez est haute (disons 2), et que votre méthode loadMore() ne remplit pas assez d'éléments, même si vous désactivez le runtime. de la méthode, que vous obtiendrez des exécutions infinies loadmore().

3
neoswf

Sans Plunker pour voir le code actuel, je vous dirigerai directement vers la FAQ de ngInfiniteScroll: 

Pourquoi ngInfiniteScroll déclenche mon expression sur chaque événement de défilement?

La directive infiniteScroll utilise la hauteur de l'élément qui est attaché à afin de déterminer la proximité du bas de la fenêtre c'est. Dans certains cas, le navigateur peut signaler une hauteur de 0, qui provoque ce comportement. Habituellement, cela est dû à un conteneur élément qui ne contient que des enfants flottés. Le moyen le plus simple de réparer Ce problème est d’ajouter un élément "spacer" au bas de la conteneur (quelque chose comme <div style='clear: both;'></div>); voir ceci StackOverflow question et ses réponses associées pour plus de détails.

17
Paul Lemke

Laissez-moi ajouter mes deux cents, eu exactement le même problème, solution différente! J'ai débogué toute la journée avec ng-infinite-scroll. À un moment donné, j’ai réalisé que javascript rapporte $(window).height() == $(document).height(), ce qui n’a aucun sens.

J'ai fait un peu de recherche sur Google, et cela arrive quand vous manquez DOCTYPE: jquery $ (window) .height () renvoie la hauteur du document

Mais cela ne suffisait pas! Mon DOCTYPE a été mangé par navigateur, à un moment donné. Vous pouvez lire plus loin: Trop grand nombre de $ (window) .height () sur wordpress

7
Erti-Chris Eelmaa

Mettez beaucoup de temps juste pour le comprendre. Pour moi, la méthode de défilement infini s’appelait infiniment, j’ai donc fait un peu de recherche et je suis arrivée à la conclusion que c’était parce que la hauteur de mon "div" pour défilement infini dans mon code était 0, n’augmentait pensant tout le temps que l'utilisateur était à la fin de la page. La solution pour moi a donc été d’ajouter une classe html "clearfix" à l’élément suivant du "div" pour le défilement infini.

1
niteshvas

Cela peut sembler évident, mais cela m’a échappé un jour. 

J'ai suivi l'exemple montré dans l'image sur la page d'accueil de NIS : 

 enter image description here

La partie importante à noter est la distance de défilement: 

infinite-scroll-distance="3"

Selon la documentation , 

si la fenêtre du navigateur a une hauteur de 1000 pixels et que la distance de défilement infini est définie sur 2, l'expression de défilement infini sera évaluée lorsque le bas de l'élément se situe à moins de 2000 pixels du bas de la fenêtre du navigateur. La valeur par défaut est 0 (par exemple, l'expression sera évaluée lorsque le bas de l'élément croise le bas de la fenêtre du navigateur).

Au cours de mon développement, je n'avais qu'une cinquantaine d'éléments à afficher et je pensais, même à tort, que NIS tirait à l'infini. En fait, il essayait juste de remplir ~ 4000 pixels. 

TL; DR: Supprimez (ou au moins réduisez) la distance de défilement infini si vous l'avez définie.

1
adamdport

J'ai pensé que le format html devrait être un peu comme ceci pour que nginfinitescroll fonctionne. L'ajout d'une fausse div externe à hauteur fixe a résolu mon problème

<div style="height:500px;">
   <div  infinite-scroll="myPagingFunction()">
     <div  ng-repeat="x in images"></div>
   </div>
</div>

J'espère que ça aide quelqu'un.

0
ibsenv

J'ai eu le même problème, sauf que le défilement infini n'arrête même pas le chargement au moment où j'ai atteint la fin du conteneur (j'ai utilisé l'option infinite-scroll-container de v1.2). Après un long débogage, j'ai remarqué que la hauteur du conteneur était float (634.245px par exemple), alors que la hauteur interne de l'élément en était proche, mais int (635px par exemple) et que cela déclencherait le cycle encore et encore, car il pensait que la limite inférieure était atteint. Le problème avec ng-infinite-scroll, c’est que son aspect visuel et qu’il ne traite pas les données réelles, j’ai donc dû vérifier les données renvoyées par le système principal et les bloquer si les résultats étaient vides (fonction associée infinite-scroll-disabled).

0
Artjom Kurapov