1

我有一堆产品，正在使用无限滚动来显示它们。如果我不更改数组值，它通常工作得很好。但是，我有不同类型的产品，并且有一个过滤器可以更改 firebase 数据库端点并将新值加载到数组中。

来回更改会以某种方式使所有产品消失。尽管如此，我确实看到产品从控制台添加到阵列中。

代码：

数据库端点更改的示例代码

    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 数据服务代码：

(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;
    }
})();

前端代码：

<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>

从控制台，我确实看到了以下内容：

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

知道这里发生了什么吗？

4

1 回答 1

1

我添加了对我的 object.NextPage() 的调用，如下所示：

工厂代码：

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));
};

控制器代码： 

$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代码：

<div infinite-scroll='Factory.nextPage()' infinite-scroll-disabled='Factory.busy' infinite-scroll-distance='1'>
  <div ng-repeat="item in Factory.items">
  </div>
</div>
于 2016-12-06T00:17:08.007 回答