ngInfiniteScroll not showing anything when changing source array

Question

I have a bunch of products and am using infinite scroll to display them. It generally works very well if I dont change the array values. However, I have different types of products and have a filter that changes the firebase database endpoints and loads the new values to the array.

Changing back and forth will somehow make all the products disappear. Even though, I do see the products being added to the array from console.

Code:

Sample code for database end point change

    function getProductByTag(tag) {
        if(lastSelection === tag && allproducts) {
            console.log('do nothing, we are good');
        } else if (lastSelection != tag) {
            lastSelection = tag;

            baseRef = firebaseDataService.root.child('products_' + tag.toLowerCase());
            scrollRef = new firebase.util.Scroll(baseRef, '$key');
            scrollRef.on('child_added', function(snap) {
               console.log('added child', snap.key);
            });

            scrollRef.scroll.next(5);

            allproducts = $firebaseArray(scrollRef);
            // store the scroll namespace on the array for easy ref
            allproducts.scroll = scrollRef.scroll;

        } else {
            console.log('We shouldnt be here');
        }

        return allproducts;
    }

Firebase Data Service code:

(function () {
    'use strict';

    angular
        .module('app.core')
        .factory('firebaseDataService', firebaseDataService);

    function firebaseDataService() {
        var root = firebase.database().ref();
        var service = {
            root : root,
            users : root.child('users')
        };
        return service;
    }
})();

Front end code:

<div infinite-scroll="vm.products.scroll.next(10)" infinite-scroll-distance="1">
  <div class="floating-box" ng-repeat="product in vm.products" ng-if="product.visibility">
    <!--some code-->
  </div>
</div>

From the console, I do see the following:

product.service.js:60 added child -KRe4D4pi5uDncBQyeLN
product.service.js:60 added child -KRe4OFAi3eYJEWGjMDv
product.service.js:60 added child -KRe5-PrzaaBr5YzzlMA
product.service.js:60 added child -KXlZL8bBzOjZ02DpCzW
etc

Any idea whats going on here ?

@Frank van Puffelen: Seems like I need to do a $digest or $apply. Any suggestions ? — Ahsan, Dec 05 '16 at 22:32
Can you post your view code? I'd like to see how you're associating vm.products. — Mathew Berg, Dec 14 '16 at 12:55

score 1 · Answer 1 · edited Dec 15 '16 at 11:07

I added a call to my object.NextPage() like this:

Factory code:

var factory= function (dto) {
  this.items = [];
  this.busy = false;
  this.after = 0;
  this.dto= dto
};

factory.prototype.nextPage = function () {
  if (this.busy) return;
  this.busy = true;
  var url = serviceBase + '/api/ApiWebPage';
  this.dto.Inicio = this.after + 1;
  this.dto.Fin = this.after + 8;
  $http.post(url, this.dto).success(function (data) {
    this.items = this.items.concat(data.Datos);
    this.after = this.after + 8;
    this.busy = false;
  }.bind(this));
};

Controller code:

$scope.initializer = function () {
  var dto = {}; //params to initializer view
  $scope.Factory = new Factory(dto);
};

// Here its whe my source changues
$scope.FilterFunction = function () {
  var dto = {}; //params to filter
  $scope.Factory = new Factory(dto);
  $scope.Factory.nextPage();
};

html code:

<div infinite-scroll='Factory.nextPage()' infinite-scroll-disabled='Factory.busy' infinite-scroll-distance='1'>
  <div ng-repeat="item in Factory.items">
  </div>
</div>

ngInfiniteScroll not showing anything when changing source array

1 Answers1