sroze / ngInfiniteScroll

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

Scroll doesn't work after ng-click on item #362

Open tom5191 opened 7 years ago

tom5191 commented 7 years ago

I'm using the scroll to paginate my contacts and listing recent calls I'm getting back from an API. The scroll and loading more contacts works fine until I click on one of the contacts. After clicking on the contact, it acts like it doesn't read the bottom of the container since it will never get the next page. This is also happens on the recent calls list. If I click on one of the calls, the scroll never fires again anywhere where ngInfiniteScroll is being used. I tried manually firing it with infinite-scroll-listen-for-event, but that doesn't seem to work for me. I've tried using fixed height to see if that was the issue, but I'm getting the same problem whether it's a fixed pixel height, or percentage.

Here's my mark up

                <md-list-item ng-repeat="client in recent.clients | orderBy:'firstName'" ng-click="recent.viewCustomer(client.id)" class="repeater-list-item recent-session" layout="row" layout-align="start start" aria-label="View {{client.fullName}}'s profile">
                    <div ng-if="client.avatar" class="md-avatar" style="background-image: url('{{client.avatar}}');"></div>
                    <div ng-if="!client.avatar" class="md-avatar" ></div>
                    <div class="md-list-item-text">
                        <h3>{{client.firstName}} {{client.lastName}} <span ng-if="!client.firstName">Unknown <small class="text-tertiary text-gray">(Customer: {{client.id}})</small></span></h3>
                    </div>
                </md-list-item>
            </md-list>

Loading function

vm.moreContacts = function () {
                    $rootScope.closeSidenavs();
                    $rootScope.btnActive = 'contacts';
                    $mdSidenav('contacts').open();
                    $sessionStorage.currentTab = 'contacts';

                    if (vm.busy || vm.foundAllContacts || vm.contactsSearchActive) {

                    } else {
                        vm.busy = true;
                        api.get('/account/' + $rootScope.user.account.id + '/clients?page=' + vm.contactsNextPage, function (success, data) {
                            if (success) {
                                for (var i = 0; i < data.clients.length; i++) {
                                    vm.clients.push(data.clients[i]);
                                }

                                self.totalFound = data.totalFound;

                                self.lastPageLoaded = data.page;

                                if (data.clients.length === 25) {
                                    vm.contactsNextPage = vm.contactsNextPage += 1;
                                    console.log(vm.contactsNextPage);
                                }

                                if (vm.clients.length === self.totalFound) {
                                    vm.foundAllContacts = true;
                                }
                            } else {
                                vm.isClientsError = true;
                            }
                            vm.busy = false;
                        });
                    }
                };

What gets called on the ng-click. All it does is load the page with the person's profile. It doesn't do anything to the infinitescroll list

vm.viewCustomer = function (clientId) {
                if (clientId > 0) {
                    if ($mdMedia('xs') || $mdMedia('sm')) {
                        $rootScope.btnActive = '';
                        $rootScope.closeSidenavs();
                    }

                    $location.path(
                        "/customer/" + clientId + "/feed"
                    );

                    $rootScope.$emit('list:filtered');

                }
            };