javascript - ng2 - Usando Infinite scroll en angularjs y jade.

ngx infinitescroll

Question

Estoy usando angularjs infinite scroll en la aplicación web de mi panel de control. Tengo una sola página que contiene múltiples widgets desplazables infinitos. Como quiero tener un desplazamiento infinito para cada uno de ellos, decidí usar scroll directiva, pero de alguna manera no está funcionando como se esperaba. Quiero que el desplazamiento infinito funcione en relación con la barra de desplazamiento de contenido interno div que usa la scrollbar de scrollbar perfecta en lugar de la ventana del navegador principal. Busqué en Google y encontré varios hilos que explican 2 nuevas variables que se pueden usar para cambiar el comportamiento predeterminado: infinite-scroll-container y infinite-scroll-parent . Intenté ambos, pero ninguno de ellos está trabajando para mí. Creo que el uso de la barra de desplazamiento perfecta está creando el problema.

Código de jade:

          .hor-col(ng-repeat="stream in socialStreams")
                .box-body(style=''min-height: 400px;'')
                    perfect-scrollbar.timeline-scroller(wheel-propagation="true" wheel-speed="1" min-scrollbar-length="8" suppressScrollX="true" id="streamScroll-{{$index}}")
                        div(infinite-scroll="loadMorePosts(stream[''streamId''], stream[''endCursor''])", infinite-scroll-disabled="stream[''infiniteScrollDisabled'']",  infinite-scroll-container="''#streamScroll-{{$index}}''")

Como hay varios widgets, no puedo usar el mismo id o clase para infinite-scroll-container y, por lo tanto, decidí generar un id dinámico.

¿Cómo puedo inyectar una clase dinámica dentro de infinite-scroll-container?

Estoy recibiendo el siguiente error:

Error: Error al ejecutar ''querySelector'' en ''Documento'': ''#streamScroll - {{$ index}}'' no es un selector válido.

PS He visto los siguientes hilos pero ninguno de ellos cubrió mi requisito:

https://github.com/sroze/ngInfiniteScroll/issues/57

Angulojs scroll infinito en un contenedor.

AngularJS - ng-repeat para asignar / generar una nueva ID única

Answer 1

El material angular tiene un rollo infinito bastante útil. Creo que deberías echarle un vistazo a Infinite Scroll.

Answer 2

No es una respuesta real al problema, pero vale la pena intentarlo.
Puedo mostrarte cómo puedes escribir tu propia directiva de desplazamiento infinito. Aquí está el código:

HTML

<div infinite-scroll="loadSomeData()" load-on="scrollToTop">
...    
</div>

La directiva:

app.directive(''infiniteScroll'', function () {
        return {
            restrict: ''A'',
            link: function ($scope, element, attrs) {
                var raw = element[0];
                element.bind(''scroll'', function () {
                    if (attrs.loadOn === ''scrollToTop'') {
                        if (raw.scrollTop === 0) {
                            $scope.$apply(attrs.infiniteScroll);
                        }
                    } else {
                        if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                            $scope.$apply(attrs.infiniteScroll);
                        }
                    }
                });
            }
        };
    }
 );

En el controlador del html:

$scope.loadSomeData = function () {
    // Load some data here.
};

Tenga en cuenta que load-on="scrollToTop" es opcional en la etiqueta html div. Esto es solo si desea ejecutar la función loadSomeData() cuando se desplaza hacia arriba, de lo contrario, ejecutará la función cuando se desplace hacia la parte inferior del div.

Answer 3

No estoy seguro de que necesite llaves dentro del parámetro de contenedor de desplazamiento infinito. Debes pasarle una cadena computable, así que te sugeriré que lo pruebes así:

infinite-scroll-container="''#streamScroll-'' + $index"

Porque este parámetro, como otros, no necesita interpolación con llaves, está listo para tomar la expresión.