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在更改源數組時不顯示任何東西

回答

相關問題