sroze / ngInfiniteScroll

Infinite Scrolling for AngularJS
http://sroze.github.com/ngInfiniteScroll/
MIT License
2.89k stars 725 forks source link

ngInfiniteScroll not working #331

Open eeerrrttty opened 7 years ago

eeerrrttty commented 7 years ago

Here is my code:

HTML:

    <ul >
        <li ng-repeat="post in wrapPostenviar.posts">
<!-- ////////////// POST ////////////////// -->
            <div id="post_wraper" infinite-scroll="wrapPostenviar.myPagingFunction()" infinite-scroll-distance="3">
                <div class="info_post">
                    <div class="foto_perfil_post"></div>
                    <div class="nome_perfil_post"><a ui-sref="channel({username: post.username})">{{post.username}}</a></div>
                    <div class="descricao_icon_post tooltipped" data-position="right" data-delay="50" data-tooltip="Adicione tags para reconhecimento de conteudo"></div>
                </div>
                <div class="texto_post_box"><span class="texto_post">{{post.description}}</span></div>
                <!--
                <a href='#box_modal_content' modal><div class="conteudo_post"><img ng-src="./conteudo_post.jpg" class="arquivo_post"></div></a> -->
                <div id="nota_post" onclick="clicknota(ok)" onmousemove="tracker_nota_position(event)">
                    <div id="tracker_nota_post">▲<span class="nota"></span></div>
                </div>
                <div class="comentario_post">
                    <ul>
                        <li>
                           <div class="comentarios_lista">
                               <div class="foto_perfil_comentario"></div>
                               <div class="box_comentario"><h6><b>Willian Caiado </b> Que imagem incrivel Fernanda! Me deixou reflexivo...</h6></div>
                           </div> 
                        </li>
                    </ul>
                    <div class="meu_comentario">
                        <div class="foto_meu_comentario"></div>
                        <div id="input_comentario" class="input-field tamanho_comentario_textarea">
                        <textarea placeholder="Comente esse post..." id="textarea_comentario" class="materialize-textarea"></textarea>
                        </div>
                    </div>
                </div>
            </div>
<!-- ///////// FINAL DO POST ///////// -->
<!-- ///////// REPETIÇÃO ATÉ FINALIZAR POSTS ////////// -->
        </li> 
    </ul>

My controller:

import angular from 'angular'; import angularMeteor from 'angular-meteor'; import template from './wrapPostenviar.html'; import './wrapPostenviar.css'; import { Meteor } from 'meteor/meteor'; import { name as Modals } from '../modals/modals'; import { Posts } from '../../../api/posts'; import { Accounts } from 'meteor/accounts-base'; import ngInfiniteScroll from 'ng-infinite-scroll'; // HERE IS THE IMPORT OF PACKAGE

class WrapPostenviar { constructor($scope, $reactive) { 'ngInject'; $reactive(this).attach($scope); this.file = {}; this.post = {}; this.helpers({ posts() { return Posts.find({},{sort: { createdAt: -1 }}); } }); }

submit() { this.owner = {owner: Meteor.userId()}; this.username = {username: Meteor.users.findOne(Meteor.userId()).username}; this.date = {createdAt: new Date}; this.result = angular.extend(this.post, this.owner, this.username, this.date); Posts.insert(this.result); this.reset(); }

reset() { this.post = {}; } } const name = 'wrapPostenviar'; // create a module export default angular.module(name, [ angularMeteor, 'ui.materialize', ngInfiniteScroll, // HERE IS THE DEPEDENCY Modals // PostEnviar // PostLista ]).component(name, { template, controllerAs: name, controller: WrapPostenviar });

graingert commented 7 years ago

Please include a URL to the site with the problem (eg a development server)

graingert commented 7 years ago

Have you tried angular material's md-virtual-repeat?

eeerrrttty commented 7 years ago

Hello Graingert. I not tried it, i think this wouldn't be a good solution, to work with angular meterial, because it has poor suport to mobile, instead im using materialize and its not so good to mix these things. Your package seems good, im doing something wrong... Sadly we don't have the site online yet, its running at localhost.

Checking other documentations i think my error is in the following:

this.helpers({ posts() { return Posts.find({},{sort: { createdAt: -1 }}); } });

This function will return this.posts, which is in our ngRepeat ->

  • (wrapPostenviar is our controller's name). the thing is: the function: myPagingFunction() in `
    ` is not defined in the controller to work together with this.helpers. How this can be handled? I have to create the function "myPagingFunction()", and i have no idea how do this
  • graingert commented 7 years ago

    md-virtual-scroll definitely supports mobile.

    Please use angular 1.5 components, isolate scope or controller as ($ctrl in template) when reporting bugs.

    If you're creating a new project please start with angular 2 + ng-cli