ngInfiniteScroll在更改源数组时不显示任何东西

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

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

代码：

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

从CONSOL数据库终点变化

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

火力地堡数据服务代码

示例代码e，我看到以下内容：

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

任何想法这里发生了什么？

来源

2016-12-05 Ahsan

@Frank van Puffelen：好像我需要做一个$ digest或$ apply。有什么建议么？ – Ahsan

你可以发布你的视图代码吗？我想看看你如何关联vm.products。 –

我添加了一个电话到我的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-06 00:17:08

ngInfiniteScroll在更改源数组时不显示任何东西

回答

相关问题